当悬停另一个图像时隐藏图像

Hide image when hovering another image

本文关键字:图像 隐藏 另一个 悬停      更新时间:2023-09-26

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

当我将鼠标悬停在img。头盔,我要img。要隐藏的图标

  <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;
}

尝试使用jQuery瞄准它并使用类作为隐藏它的方式。

jQuery

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

.icon.hidden {
    display: none;
}

这是一个jsFiddle

或者您只需使用Jquery的隐藏和显示::http://www.w3schools.com/jquery/jquery_hide_show.asp