ホバー要素

画像上で検出されていない：私はホバーはマウスカーソルは、成形その青いダイヤモンドの上に移動した場合でも、登録したいホバー要素

：

私が欲しいもの上記の画像の領域。

問題：私は視覚的に.path_part領域としてユーザに表示される青い菱形の面積、上にカーソルを移動するたびに

、ホバールール.folder_path .path_part:hoverは.part_partに適用されていません。 10000 .path_partのz-indexと.right_arrow -1へのそれを設定し

：私が試した何

。まだ運がありません。すべてのfiddle.

まず作業

JSFiddle link

出典

2016-05-15 Gaurang Tandon

'z-index'を適用したい要素に' position：relative'が必要です。また、z-indexを-1ではなく1に変更してください。https://jsfiddle.net/m1pacc6z/3/ – Miro

、z-indexは注意すべき9999

一つのことだけ左部分.right-arrowは.path-partと重複し、以来されていることであるの最大値を持つことができますホバリングハンドラは.path-partにあり、その部分だけがホバリングハンドラをトリガします。

はまた、配置されるの両方.path-partと.right-arrow必要が動作するz-indexため、すなわち、relative、absolute又はfixedのいずれかに設定された位置の特性です。あなたはあなたのために働くだろうjquery.Thisコードを使用することができます

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

出典

2016-05-15 05:54:51

私はフィドルリンクに何か問題があると思います。それは私のためにクロームの私のために働いていない、私は矢印と項目の上にそれが点灯しない前にホバー – Keatinge

それは、矢印の左部分だけホバリングハンドラを持つパス部分とオーバーラップしているので。 –

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

：

はにあなたのCSSを変更し

。

出典

2016-05-15 06:03:46

答えて

関連する問題