DIV 목록으로 마우스를 가져 가거나 클릭하십시오

Question

집합이 DIV입니다. 마우스 오버시 효과를 주어야하며 DIV 중 하나가 클릭되었을 때 클릭 된 DIV가 마우스를 올려 놓은 것처럼 보일 것입니다 효과) 다른 DIV 클릭 할 때까지.

<div class="items" id="item1">AN ITEM</div> 
    <div class="items" id="item2">AN ITEM</div>  
    <div class="items" id="item3">AN ITEM</div> 
    <div class="items" id="item4">AN ITEM</div>  

jQuery를 사용하여이 작업을 시도했지만 효과가 사라졌습니다.

$('.items').hover(function() { 
    var div = $(this).attr('id'); 
    if ($(div).css("background-color") == settings.color2) { 
     return false; 
    } else { 
     $("#" + div).css("background-color", settings.color2); 

    } 
}, function() { 
    var div = $(this).attr('id'); 
    if ($(div).css("background-color") == settings.color2) { 
     return false; 
    } else { 
     $("#" + div).css("background-color", "transparent"); 
    } 
}).click(function() { 
    $(this) 
     .closest('div') 
     .css("background-color", "transparent"); 
    $(this).css("background-color", settings.color2); 
}); 

Answer 1

가 대신 JS를 사용하여 호버 스타일을 추가하는, 내가 CSS를 통해에 추가 건의 할 것입니다. 그리고 "활성"클래스에 동일한 스타일을 추가하고 클릭시 해당 클래스를 토글하십시오. 이 같은

뭔가 :

CSS :

.items:hover, 
.items.active { 
    background-color: /* whatever */; 
} 

JS :

$('.items').on('click', function() { 
    $('.items').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 2

마우스를 올렸을 때와 같은 스타일의 클릭에 "활성"클래스를 추가해보십시오. 다른 div를 클릭하면 이전에 클릭 한 div에서 해당 클래스를 제거하고 현재 div에 추가합니다.

Answer 3

시도

var $items = $('.items').hover(function() { 
    $(this).css("background-color", 'red'); 
}, function() { 
    if (!$(this).hasClass('clicked')) { 
     $(this).css("background-color", "transparent"); 
    } 
}).click(function() { 
    $items.filter('.clicked').css("background-color", "transparent").removeClass('clicked') 
    $(this).addClass('clicked').css("background-color", 'red'); 
}); 

데모 : Fiddle

참고 : 나는이 경우, 색상은 옵션에서 오는 배경처럼 보이기 때문에 클릭 한 상태 스타일을 클래스를 사용 din't 그 클래스를 할당하기가 어려울 수도 있고 그렇지 않으면 클릭 된 클래스도 설정으로 전달되어야합니다.

더 나은 대안은

var settings = { 
    color2: 'red', 
    clicked: 'clicked' 
} 

var $items = $('.items').hover(function() { 
    $(this).css("background-color", settings.color2); 
}, function() { 
    if (!$(this).hasClass('clicked')) { 
     $(this).css("background-color", "transparent"); 
    } 
}).click(function() { 
    $items.filter('.' + settings.clicked).removeClass(settings.clicked) 
    $(this).addClass(settings.clicked); 
}); 

데모하는 것입니다 : Fiddle이