在元素上未检测到悬停

Question

图片：

我想要的：

即使鼠标光标移到上图中的蓝色菱形区域，我也希望悬停被注册。

问题：

每当我将鼠标悬停在那个蓝色菱形区域上时，用户在视觉上将其显示为 .path_part 中的一个区域，悬停规则 .folder_path .path_part:hover 不会应用于 .part_part。

我试过的：

将.path_part的z-index设置为10000，将.right_arrow的z-index设置为-1。仍然没有运气。

JSFiddle link

Answer 1

工作fiddle.

首先，z-index可以有最大值9999。

需要注意的一件事是只有左侧部分 .right-arrow 与 .path-part 重叠，并且由于悬停处理程序处于 .path-part 只有左侧部分会触发悬停处理程序.

此外，要使 z-index 工作，.path-part 和 .right-arrow 都需要定位，即位置属性设置为 relative， absolute 或 fixed.

将您的 CSS 更改为：

.folder_path .right_arrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    height: 35px;
    width: 35px;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-mask-image: -webkit-gradient(linear, left top, right     bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
    margin-left: -25px;    
}

.folder_path .path_part {
    position: relative;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    min-width: 40px;
    font-size: 20px;
    padding: 0 10px;
    z-index: 2;
}

Answer 2

  $(".path_part").hover(function(){
       $(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
  }, function(){
       $(this).next().css({"background": "unset"});
  });

您可以使用 jquery.This 代码。

在元素上未检测到悬停

Hover not being detected on element

javascript

css

hover