没有在元素上检测到悬停

Question

图片：

我想要的是什么：

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

问题：

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

我尝试了什么：

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

JSFiddle link

Answer 1

工作fiddle.

首先，z-index的最大值可以是9999.

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

此外，要使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。此代码适合您。