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

Question

我有它里面有一张图片。当一个悬停时，另一个带有几个选项，其中有一个。当鼠标离开时，叠加层消失。

更具体地说：

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 通常非常 "smart" 并且有许多有用的功能，可以帮助他理解一个人想做什么。但是，有时在交叉浏览方面它们可能会误导您。在 Firefox 和 IE 上，当 select > 选项悬停时，.hover-window 消失。

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

Answer 1

因此，关于您的评论，我做了一个 fiddle，它正在处理添加和删除 css class。图片现在得到一个更暗的覆盖层，上面有选项。希望这就是您要找的。

 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/

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

Answer 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 在那里不工作。

非常感谢您的见解。非常感谢！

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

mouseleave event is triggered when I choose an option of select although it's not outside of the area

html

css

jquery

mouseevent

mouseleave