当我选择 select 选项时触发 mouseleave 事件，尽管它不在该区域之外答案

【问题标题】：mouseleave event is triggered when I choose an option of select although it's not outside of the area当我选择 select 选项时触发 mouseleave 事件，尽管它不在该区域之外
【发布时间】：2015-10-22 07:47:11
【问题描述】：

我有它在其中托管图像。当一个人悬停时，另一个人会在上面放置几个选项，其中包括一个 .当鼠标离开 this 时，覆盖消失。

更具体地说：

HTML

 <li id="pos-1" class="hoverable">
    <img src="/3676136a.jpg?1445498347" width="170"  border="0" >
    <div class="hover-window">
      <div class="view-holder"> 
       <select autocomplete="off" >
         <option disabled="" selected="selected" value="-1">Pick a view...  </option>    
         <option value="1">BOOT</option>    
         <option value="2">COCKPIT</option>   
         <option value="3">FRONT</option>   
       </select>
      </div>
    </div>
</li>

jquery

  var onPhoto = $(this).find(".hover-window");
  $('.hoverable').on('mouseenter',function(e) {
    console.log("entered the area");
    e.stopPropagation();
    onPhoto.fadeIn();
  });

  $('.hoverable').on('mouseleave',function(e) {
    console.log("left the area");
    e.stopPropagation();
    onPhoto.fadeOut();
  });

当然，这适用于 Chrome，但 Chrome 通常非常“聪明”，并且有许多有用的功能可以帮助他了解自己想要做什么。但是，有时它们可能会在交叉浏览方面误导您。在 Firefox 和 IE 上，选择 > 选项悬停的那一刻，.hover-window 就会消失。

有什么想法吗？非常感谢！

【问题讨论】：

您是否希望悬停效果仅出现在图片上而不出现在其余代码上？
是的。想象一张照片，它有一个显示选项的较暗叠加层。较暗的叠加层是通过悬停窗口类触发的。

标签： jquery html css mouseevent mouseleave

【解决方案1】：

所以，关于你的评论，我做了一个小提琴，它正在添加和删除 css 类。图片现在得到一个较暗的覆盖层，上面有选项。我希望这就是您正在寻找的。p>

 var onPhoto = $(this).find(".hover-window");
  $('.hoverimage').on('mouseenter',function(e) {
    console.log("entered the area");
    e.stopPropagation();
    $(".hoverable").css("display", "block");
  });

  $('.hoverable').on('mouseleave',function(e) {
    console.log("left the area");
    e.stopPropagation();
    $(".hoverable").css("display", "none");
  });

https://jsfiddle.net/5uvayph8/

【讨论】：

【解决方案2】：

问题是fadeOut 导致元素被隐藏。

我会改用.css() 来改变它的不透明度：

var onPhoto = $(this).find(".hover-window");
  $('.hoverable').on('mouseenter',function(e) {
    console.log("entered the area");
    e.stopPropagation();
    onPhoto.css('opacity', '1');
  }).on('mouseleave',function(e) {
    console.log("left the area");
    e.stopPropagation();
    onPhoto.css('opacity', '0');
  });

Example Fiddle

一点点css，就可以保留淡入淡出效果：

.hover-window{
    transition: all .5s;
}

【讨论】：

【解决方案3】：

而不是 jquery 事件，并且因为需要旧版浏览器兼容性，我通过删除所有相关 jquery 事件并插入 CSS z-index 规则来解决它：

.hoverable{
  display:inline-block;
  margin: 3px;
  z-index: 3;
  position: relative;
} 
.hover-window
{
 display:none;
 position:relative;
 top: -127px;
 width:170px;
 height:127px;
 color:#fff;
 background: RGBA(0, 0, 0, 0.65);
 z-index: 1;
 -webkit-transition: background 0.2s ease-in;
 -moz-transition: background 0.2s ease-in;
 -ms-transition: background 0.2s ease-in;
 -o-transition: background 0.2s ease-in;
 transition: background 0.2s ease-in;
}
 .hoverable:hover .hover-window
{
 display:block;
 z-index:10;
}

我将为 IE8 做一些额外的规则，因为 rgba 在那里不起作用。

非常感谢你们的洞察力。我真的很感激！

【讨论】：