悬停其他图像时隐藏图像

时间:2014-07-11 21:18:05

标签: javascript css3

我似乎无法让这个工作,所以不知道它是否可能

当我将鼠标悬停在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;
}

2 个答案:

答案 0 :(得分:2)

尝试使用jQuery进行定位,并使用该类作为隐藏它的方法。

<强>的jQuery

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

<强> CSS

.icon.hidden {
    display: none;
}

Here's a jsFiddle

答案 1 :(得分:0)

或者您只是使用Jquery :: http://www.w3schools.com/jquery/jquery_hide_show.asp

的隐藏和显示