css - コンテナにホバーすると2つの要素が表示され、特にホバーすると一方が非表示になりますか？

Question

画像の両側に列として設定されている2つのナビゲーション要素があります。あなたは私のウェブサイト、ここでそれらを所定の位置で見ることができます。任意の画像をクリックし、画像が読み込まれたら、その画像にカーソルを合わせます。

私が達成しようとしていることは次のとおりです。

カーソルが画像の外側にある場合、両方のナビゲーションボタンは不透明度0％に設定されます。
画像を中央（2つのナビゲーションボタンのどちらにもかからない）に置くと、両方のナビゲーションボタンが50％の不透明度に設定されます。
いずれかのナビゲーションボタンを直接ホバーすると、不透明度が100％に設定され、もう一方のナビゲーションボタンが不透明度0％に設定されます。

現在、これは機能していません。HTMLは次のとおりです。

<div id="sb-body">
    <a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()"></a>
    <a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()"></a>
    <div id="sb-body-inner">
        <img style="position: absolute;" src="Corrosion.jpg" id="sb-player" height="405" width="609">
    </div>
</div>

そしてCSSは次のとおりです。

    #sb-nav-next {
    right:0;
    background:url('../images/nav-right.png') center center no-repeat;
}

#sb-nav-previous {
    left:0;
    background:url('../images/nav-left.png') center center no-repeat;
}

#sb-body:hover .sb-bignav {
    opacity:0.5;
    -webkit-opacity:0.5;
    -moz-opacity:0.5;
}

#sb-nav-next:hover #sb-nav-previous, 
#sb-nav-previous:hover #sb-nav-next {
    opacity:0;
    -webkit-opacity:0;
    -moz-opacity:0;
}

.sb-bignav {
    cursor:pointer;
    position:absolute;
    width:200px;
    height:100%;
    top:0;
    z-index:400;
    opacity:0;
    -webkit-opacity:0;
    -moz-opacity:0;
    transition: opacity .125s ease-in;
    -webkit-transition: opacity .125s ease-in;
    -moz-transition: opacity .125s ease-in;
}

.sb-bignav:hover {
    opacity:1.0;
    -webkit-opacity:1.0;
    -moz-opacity:1.0;
}

デモ： http： //jsfiddle.net/zNkcQ/

score 3 · Accepted Answer

これは純粋なCSSを使用して実行できますが、前の要素と次の要素を内部の本体要素を超えて移動する必要があります。

デモ： http： //jsfiddle.net/SO_AMK/c5Xn3/

CSS：

#sb-body-inner { 
    height: 405px; 
} 
/* This is the height of the image inside the slider.
If you do not change this line than #sb-body-inner will be about 20px tall and 
will not trigger the hover event */

#sb-body-inner:hover ~ #sb-nav-previous.sb-bignav,
#sb-body-inner:hover ~ #sb-nav-next.sb-bignav { 
    opacity: 0.5; 
}

#sb-nav-previous.sb-bignav:hover,
#sb-nav-next.sb-bignav:hover {
    opacity: 1.0;
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
}

.sb-bignav {
    cursor: pointer;
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    z-index: 400;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    transition: opacity .125s ease-in;
    -webkit-transition: opacity .125s ease-in;
    -moz-transition: opacity .125s ease-in;
}

#sb-nav-next {
    right: 0;
    background: url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}

#sb-nav-previous {
    left: 0;
    background: url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}

HTML：

<div id="sb-body">
    <div id="sb-body-inner">
        <img style="position: absolute;" src="http://www.element17.com/gallery/01_CONSTRUCTS/Shear.jpg" id="sb-player" height="405" width="609">
    </div>
    <a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()"></a>
    <a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()"></a>
</div>

</ p>

score 1 · Accepted Answer

さて、私はこの問題のcssソリューションに関するすべての参照を使い果たしました。問題は、要素の前の兄弟を選択する方法がないため、左側のナビゲーションオーバーレイが透明になることは決してないということです。適切なナビゲーションオーバーレイを透明にすること #sb-body .sb-bignav:hover ~ .sb-bignav { opacity: 0; } に成功しましたが、それだけです。

これを行うには、jQueryを使用することをお勧めします。

年

$('.sb-bignav:hover').siblings().css('opacity', 0);

新着

$('.sb-bignav').hover( function(){
    var self = $(this);
    self.css('opacity', 1);
    self.siblings('.sb-bignav').css('opacity', 0);
}, function(){
    var self = $(this);
    self.css('opacity', .5);
    self.siblings('.sb-bignav').css('opacity', .5);
});

score 1 · Accepted Answer

最初の問題は、各セレクターの特異性です。より具体的（より多くのポイント）は、より具体的でない（より少ないポイント）をオーバーライドします。

ID：100ポイント

クラス：10ポイント

要素：1ポイント

次に、このルールには110ポイントがあります。

#sb-body:hover .sb-bignav {
    opacity:0.5;
    -webkit-opacity:0.5;
    -moz-opacity:0.5;
}

以下では、ルールには10ポイントがあり、前のルールによって110で上書きされています。

.sb-bignav:hover {
    opacity:1.0;
    -webkit-opacity:1.0;
    -moz-opacity:1.0;
}

このCSSを試してください：

#sb-nav-next {
    right:0;
    background:url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}

#sb-nav-previous {
    left:0;
    background:url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}

#sb-body:hover .sb-bignav {
    opacity:0.5;
    -webkit-opacity:0.5;
    -moz-opacity:0.5;
}

#sb-body .sb-bignav:hover {
    opacity:1.0;
    -webkit-opacity:1.0;
    -moz-opacity:1.0;
}

.sb-bignav {
    cursor:pointer;
    position:absolute;
    width:200px;
    height:100%;
    top:0;
    z-index:400;
    opacity:0;
    -webkit-opacity:0;
    -moz-opacity:0;
    transition: opacity .125s ease-in;
    -webkit-transition: opacity .125s ease-in;
    -moz-transition: opacity .125s ease-in;
}

デモ： http： //jsfiddle.net/DmAVQ/

2番目の問題は、CSSだけでは3番目の項目を実行できないことです。

「どちらかのナビゲーションボタンを直接ホバーすると、不透明度が100％に設定され、もう一方のナビゲーションボタンが不透明度0％に設定されます。」

これを行うには、JavaScriptを使用する必要があります。

score 1 · Accepted Answer

ただのアイデア...タグに2つのクローンナビゲーションを配置することでそれを行うことができるかもしれませんanchor...私はフィドルを作りました：http： //jsfiddle.net/zNkcQ/5/

<div id="sb-body">
    <a id="sb-nav-previous" class="sb-bignav" title="Previous" onclick="Shadowbox.previous()">               
        <span class="sb-img-next"></span>              
        <span class="sb-img-previous"></span>
    </a> 
    <a id="sb-nav-next" class="sb-bignav" title="Next" onclick="Shadowbox.next()">              
        <span class="sb-img-previous"></span>              
        <span class="sb-img-next"></span>
    </a>
    <div id="sb-body-inner">
        <img style="position: absolute;" src="Corrosion.jpg" id="sb-player" height="405" width="609">
    </div>
</div>
.sb-img-previous{
    left:0;
    pointer-events: none;
    background:url('http://www.element17.com/images/nav-left.png') center center no-repeat;
}
.sb-img-next{
    right:0;
    pointer-events: none; 
    background:url('http://www.element17.com/images/nav-right.png') center center no-repeat;
}
.sb-img-previous, .sb-img-next{
    position: fixed;
    width: 200px;
    height: 100%;
    etc...
}
#sb-nav-previous .sb-img-next,
#sb-nav-next .sb-img-previous,
#sb-nav-previous:hover .sb-img-previous,
#sb-nav-next:hover .sb-img-next{
    opacity: 0.5;
    pointer-events: none; //So each button will not be burdened by its duplicate...
}
#sb-nav-previous .sb-img-previous,
#sb-nav-next .sb-img-next,
#sb-nav-previous:hover .sb-img-next,
#sb-nav-next:hover .sb-img-previous{
    opacity: 0;
}

css - コンテナにホバーすると2つの要素が表示され、特にホバーすると一方が非表示になりますか？

4 に答える 4

Related

Reference