Question

对于令人困惑的标题感到抱歉，我将尝试更好地描述这个问题。

页面有两个相等的分隔符，当我将鼠标悬停在左边的div上时，我希望不透明度也能改变，我希望第二个div的不透明度同时改变。代码目前正在执行此操作，但是，使用右侧分隔符时，悬停只会自行更改，而不会更改左侧分隔符。

我也愿意采用新方法来解决这个问题。

HTML：

<div class="wrap">
    <div class="bgimage" id="left"> 
        <div class="text">
            <h1>Portfolio</h1>
        </div>
    </div>

    <div class="bgimage" id="right"> 
        <div class="text">
            <h1>Photography</h1>
        </div>
    </div>
</div>

CSS：

.wrap {
    width:100%;
    height:100vh;
    background-color:#000;
}

.text {
    height:55px;
    opacity:0.9;
    text-align:center;
    vertical-align:middle;
    position:absolute; 
    top:0; 
    bottom:0;
    margin:auto; width:50%;
}

.bgimage{
    width:50%;
    height:100vh;
    opacity: 0.6;
    -webkit-transition: opacity 0.8s ease-in-out;
    -moz-transition: opacity 0.8s ease-in-out;
    -o-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

#left {
    float:left;
    background-image:url(left.jpg);
}

#right {
    float: right;
    background-image:url(right.jpg);
}

#left:hover~div#right, #right:hover~div#left {
    opacity: 0.3;
}

#left:hover, #right:hover {
    opacity: 1;
}

Answer 1

当然它适用于第一个div而不是第二个div，你永远不能在CSS中选择一个前面的元素，你最好的镜头是jQuery，看看这段代码：

$(document).ready(function () {
    $('.bgimage').hover(function () {
        $('.bgimage').removeClass('hovered').addClass('unhovered');
        $(this).addClass('hovered').removeClass('unhovered');
    });
});

这是您的示例的 FIDDLE ，我做了一些小的CSS更改..希望有所帮助

CSS帮助：div：hover~div稍后在代码中不适用于div

1 个答案: