css - 是否有两个元素在其容器悬停时出现，然后在另一个元素特别悬停时消失？

Question

我有两个导航元素，它们设置为图像两侧的列。你可以在我的网站上看到它们，这里。单击任何图像，加载后，将鼠标悬停在其上。

我要完成的工作如下：

当光标在图像之外时，两个导航按钮都设置为 0% 不透明度。
当图像悬停在中心时（不在两个导航按钮上），两个导航按钮都设置为 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

只是一个想法......也许你可以通过在anchor标签中放置 2 个克隆导航来做到这一点......我做了一个小提琴：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;
}

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

第一个问题是每个选择器的特殊性。更具体（更多点）覆盖不太具体（更少点）。

身份证：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/

第二个问题是你不能只用 CSS 做第三项。

“当任一导航按钮直接悬停时，它设置为 100% 不透明度，而另一个导航按钮设置为 0% 不透明度。”

您需要使用 JavaScript 来执行此操作。

css - 是否有两个元素在其容器悬停时出现，然后在另一个元素特别悬停时消失？

4 回答 4

Related

Reference