CSS 帮助：div:hover~div 在代码后面对 div 不起作用答案

【问题标题】：CSS Help: div:hover~div does not work for div later in codeCSS 帮助：div:hover~div 在代码后面对 div 不起作用
【发布时间】：2014-05-29 00:31:08
【问题描述】：

Example of page

抱歉标题令人困惑，我将尝试在这里更好地描述问题。

页面有两个相等的分隔线，当我将鼠标悬停在左侧 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;
}

【问题讨论】：

标签： css html hover opacity

【解决方案1】：

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

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

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

【讨论】：