懸停其他圖像時隱藏圖像

Question

我似乎無法正常工作，所以不知道是否可能

當我將鼠標懸停在img.helmet上時，我希望img.icon被隱藏

  <img class="helmet" src="">
  <img class="mini" src="">        
  <img class="helmet" src="">
  <img class="mini" src="">
  <img class="icon" src="">

這是我的jsfiddle嘗試-http: //jsfiddle.net/8wrbL/28/

.helmet:hover > .icon,.helmet:hover + .icon {
  display:none;z-index:-999999;left:-999999;
}

更新：看來這可行，但是對於一個簡單的任務來說似乎很多css，我將擁有很多圖像，這種方式可能需要一些時間

.helmet:hover+.mini+.icon,.helmet:hover+.mini+.helmet+.mini+.icon,.helmet:hover+.mini+.helmet+.mini+.helmet+.mini+.icon{
display:none;
}

Answer 1

嘗試使用jQuery定位它，並使用該類作為隱藏它的方法。

jQuery的

$('.helmet').hover(function () {
   $('.icon').toggleClass('hidden'); 
});

CSS

.icon.hidden {
    display: none;
}

這是一個jsFiddle

Answer 2

或者，您只是使用Jquery的隱藏和顯示:: http://www.w3schools.com/jquery/jquery_hide_show.asp