3

ページの残りの部分を強調表示/グレーアウトしようとしています。私が持っているコードは次のとおりです。

jQuery(document).ready(function ($) {
$('.entry-content').mouseover(function(e) {
$('.expose').mouseover(function(e){
    $(this).css('z-index','99999');
    $('#overlay').fadeIn(300);
});
});

$('.entry-content').mouseleave(function(e) {
$('.expose').mouseleave(function(e){
    $('#overlay').fadeOut(0, function(){
        $('.expose').css('z-index','1');
});});});});

HTMLは次のようになります

<div id="overlay">
<div class="entry-content">
  <div class="expose">something</div>
  <div class="expose">something</div>
  <div class="expose">something</div>
</div>

#overlay {
background:rgba(0,0,0,0.3);
display:none;
width:100%; height:100%;
position:absolute; top:0; left:0; z-index:99998;
}

私が求めているのは、ユーザーがエントリコンテンツのdivにカーソルを合わせ、ページをグレー表示のままにして、カーソルを合わせているdivを強調表示している限りです。

何か案は？ありがとう

4

2 に答える 2

6

Az-indexは、ドキュメントではなく、スタッキングコンテキストに関連しています。要素をオーバーレイの上に表示する場合はexpose、それらが兄弟であるか、を.expose使用して明示的に配置する必要がありますposition:*。

一般に、要素は、それらのz-index値が比較されるために、同じスタッキングコンテキストの一部である必要があります。スタッキングコンテキストについて詳しくは、こちらをご覧ください。

いくつかの追加のポイント：

  1. オーバーレイをポインタイベントに対して透過的にする必要があります。あなたはを使用してこれを行うことができますpointer-events:none;
  2. .exposeコンテナがマウスオーバーされたときにバインドする必要はありません。オーバーレイを表示/非表示にするためのハンドラーと並行してハンドラーをバインドします

修正されたコードは次のとおりです。ここで実際のデモンストレーションを見ることができます：

CSS：

#overlay {
    background:rgba(0,0,0,0.3);
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:99998;
    pointer-events:none
}
.expose{
    background-color:red;
    position:relative;
}

JS：

$('.entry-content').hover(function() {
    $('#overlay').fadeIn(300);
}, function() {
    $('#overlay').fadeOut(300);
});

$('.expose').hover(function(e) {
    $(this).css('z-index', '99999');
},function(e) {
    $(this).css('z-index', '1');
});
于 2013-01-03T21:23:40.847 に答える
1

オーバーレイなしでCSS3を使用してこの動作をシミュレートできます

jsfiddleの例

<div class="wrapper">
    <div class="entry-content">
      <div class="expose">something</div>
      <div class="expose">something</div>
      <div class="expose">something</div>
    </div>
</div>​

html, body, .wrapper {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}

.wrapper {
    -webkit-transition:all 300ms;
    -moz-transition:all 300ms;
    -ms-transition:all 300ms;
    -o-transition:all 300ms;
    transition:all 300ms;
}

.wrapper:hover {
    background:rgba(0,0,0,.3);
}

.wrapper:hover .expose {
    background:#ddd;
}

.entry-content {
    padding:6px;
}

.expose {
    margin-bottom:6px;
    padding:12px;
    border-radius:3px;
    background:#eee;
}

.expose:hover {
    background:#fff!important;
}
​
于 2013-01-03T21:47:48.760 に答える