0

divのスタックがすべて重なり合っており、position：absoluteに設定されており、すべてコンテナdivに含まれています。私がやりたいのは、ユーザーが＃feature_1_hitboxにカーソルを合わせたときに、＃feature_1_shadeの背景位置を変更することです。私はこれを使用してこれを達成しようとしました-

#feature_1_hitbox:hover #feature_1_shade {
background-position: 0 0;
}

これは機能しません。ただし、コンテナdivにそのまま適用すると機能します。

#feature_1_container:hover #feature_1_shade {
background-position: 0 0;
}

私はこれでほぼ解決しますが、ヒットボックスを特定のサイズにする必要があるため、：hoverをヒットボックスdivに適用する必要があります。これが1つのdivで機能し、別のdivでは機能しない理由はありますか？

マークアップコードは次のとおりです。

<!-- container --> <div id="feature_1_container">
<!-- shade --> <div id="feature_1_shade"></div>
<!-- text and arrow --> <div id="feature_1_text_container"><h3 id="feature_1_arrow">Memberships</h3><p id="feature_1_text">Text here text here</p></div>
<!-- image --> <div id="feature_1_graphic"></div>
<!-- hitbox --> <a href="#"><div id="feature_1_hitbox"></div></a>

</div> <!-- #feature_1_container -->

CSSは次のとおりです。

#feature_1_container {
width: 289px;
height: 255px;
float: left;
}

#feature_1_hitbox {
width: 289px;
height: 166px;
margin: 89px 0 0 0;
position: absolute;
/* background-color: #F99; */
}

#feature_1_graphic {
width: 289px;
height: 255px;
position: absolute;
background-image: url(site_style_images/feature_1_memberships_bag.png);
}

#feature_1_text_container {
width: 289px;
margin: 100px 0 0 0;
position: absolute;
}

#feature_1_text {
margin: 0 0 0 100px;
}

#feature_1_arrow {
background-image: url(site_style_images/feature_arrows.png);
background-position: center right;
background-repeat: no-repeat;
height: 49px;
padding: 0 30px 0 100px;
margin: 0 22px 0 0;
color: #8d895c;
font-size: 22px;
line-height: 44px;
font-family: 'Quicksand', sans-serif;
font-weight: normal;
letter-spacing: -2px;
font-style: normal;
}

#feature_1_shade {
width: 289px;
height: 166px;
margin: 89px 0 0 0;
background-image: url(site_style_images/feature_1_shade.png);
background-position: 0 -166px;
position: absolute;
background-color: #CCC;
}

#feature_1_hitbox:hover #feature_1_shade {
background-position: 0 0;
}
4

2 に答える 2

1

HTMLソースコードをこの順序で使用するには、JavaScriptまたはjQueryを使用する必要があります。CSSセレクターは、以前の要素を逆方向に参照することはできません。

ソースの順序が逆になっている場合は、次のようなことができる可能性があります。

#feature_1_hitbox:hover ~ a #feature_1_shade

jQueryがオプションの場合、#feature_1_shade次の状態に基づいてクラスを追加および削除でき#feature_1_hitboxます。

CSS

#feature_1_shade.on {...}

jQuery

$("#feature_1_hitbox").hover(
    function(){ $('#feature_1_shade').addClass('on'); },
    function(){ $('#feature_1_shade').removeClass('on'); }
);

JavaScriptに相当するものは次のとおりです。

var obj = document.getElementById("feature_1_hitbox");
obj.onmouseover = function(){
    document.getElementById("feature_1_shade").className = "on";
}
obj.onmouseout = function(){
    document.getElementById("feature_1_shade").className = "";
}

注：#feature_1_shade他のクラスを使用する場合は、プレーンJavaScriptを使用してクラスを追加または削除するときに注意する必要があります。

于 2012-06-24T21:40:44.420 に答える
0

これが機能しない理由は、CSS セレクターの場合、#container:hover #shade{} が実際に ID #container 内の ID #shade をスタイルするためです。マークアップ コードでは、#shade は #container にネストされていますが、#hitbox にはネストされていません。おそらく、ヒットボックスとまったく同じサイズと同じ位置で別の「見えない div」(不透明度:0) を追加し、見えない div 内にシェードを含めてから、ホバーセレクターで見えない div をスタイリングするとうまくいくかもしれません。例: #invisible_hitbox_hover:hover #shade{}

于 2012-06-30T09:19:07.400 に答える