Question

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

我想要完成的工作如下：

当光标位于图像之外时，两个导航按钮都设置为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/

Answer 1

这个可以使用纯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>

Answer 2

好吧，我已经用尽了所有关于这个问题的css解决方案的参考资料。问题是你永远不会让左导航覆盖变得透明，因为没有办法选择元素的前一个兄弟。我用了 #sb-body .sb-bignav:hover ~ .sb-bignav { opacity: 0; } 成功地使正确的导航覆盖变得透明，但就是这样。

我建议使用jQuery来执行此操作：

<强> OLD

$('.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); });

Answer 3

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

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/

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

＆＃34;当导航按钮直接悬停时，它设置为100％不透明度，另一个导航按钮设置为0％不透明度。＆＃34;

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

Answer 4

只是一个想法...... 也许你可以通过在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;
}

当他们的容器悬停时会出现两个元素，然后当另一个元素专门悬停时会有一个元素消失吗？

4 个答案: