div의 다른 요소를 가리키면 이미지 불투명도가 변경됨

Question

이미지 위에 마우스를 올려 놓으면 div의 다른 이미지의 이미지 불투명도가 변경되지만 드래그 한 이미지의 불투명도는 변경되지 않도록 여기에 사용되는 효과를 만들려고합니다. http://www.mintel.com/meet-the-team/page/2

$('myElement').set('opacity', 0.5).addEvents({ 
    mouseenter: function(){ 

나는이 기능을 사용하려고했지만이 호버 내가 jQuery를 사용하지 않고 시작할 수있는 방법에 대한 어떤 제안에 전체 div의 불투명도를 변경 것인가?

Answer 1

순수 CSS 나는 그것이 가능하다고 생각하지 않는다. 왜냐하면 당신이 CSS에 이미 구현되어 있지 않은 선택자를 필요로하기 때문에,이 js 해결책을 사용할 수 없다.

코드 :

var rows = document.getElementsByClassName('demo'); 
for (var i = 0; i < rows.length; i++) { 
    rows[i].onmouseenter = function (event) { 
     for (var j = 0; j < rows.length; j++) { 
      if (rows[j]===this) continue 
      rows[j].className += " other"; 
     } 
    }; 

    rows[i].onmouseleave = function (event) { 
     var hovers = document.getElementsByClassName('other'); 
     var len = hovers.length; 
     for (var j = 0; j < len; j++) { 
      hovers[0].className = hovers[0].className.replace(/\sother(\s|$)/, ''); 
     } 
    }; 
} 

데모 : 난 당신이 연결 한 사이트의 자바 스크립트 물마루 찾고 제안 http://jsfiddle.net/IrvinDominin/7K2Z3/

Answer 2

각 블록 (이미지 + 텍스트)에 .item 클래스가 있다고 가정 해 보겠습니다.

var item = $('.item'); 
item.on('hover', function() { 
    item.css('opacity', '0.5'); 
    $(this).css('opacity', '1'); 
}); 

희망을 얻으십시오.

Answer 3

모든 이미지에 공통된 등급을 지정하십시오.

$(".commonClass:not(:hover)") 

이 가져가되지 않은 모든 이미지를 선택합니다 : 그런 다음이 선택을 사용할 수 있습니다. 당신의 mouseenter 이벤트와

당신이 가져 및 불투명도 변경 적용되지 않은 모든 이미지 선택 : 불투명도 복원

$(".commonClass:not(:hover)").css('opacity', '0.5'); 

가 mouseleave 이벤트 추가하기 : 그래서

$(".commonClass:not(:hover)").css('opacity', '1'); 

을, 당신은 종료됩니다 다음과 같이 입력하십시오.

$('.commonClass').on('mouseenter', function() { 
    $(".commonClass:not(:hover)").css('opacity', '0.5'); 
}); 

$('.commonClass').on('mouseleave', function() { 
    $(".commonClass:not(:hover)").css('opacity', '1'); 
});