html - 悬停时更改其他div

JSFIDDLE
的HTML

<div id="container">
    <a href="#">
        <div class="hover">
            <div class="imgdiv"></div>
       </div>
    </a>
    <div class="imgdiv_2">
    </div>
</div>

的CSS

#container{
    width:250px;
    height:250px;
    border:1px solid black;
}
a{
    height:250px;width:250px;
}
.hover{
    height:250px;
    width:250px;
    position:absolute;
    z-index:1;
}
.hover:hover > .imgdiv{
    opacity:0.5;
    height:300px;
}
.hover:

hover + .imgdiv_2{
    width:4300px;
}
.imgdiv{
    height:250px;
    width:250px;
    background-color:red;
    opacity:0;
}
.imgdiv_2{
    width:300px;
    height:250px;
    background-color:black;
    opacity:0.1;
}

我对此部分有疑问：

hover + .imgdiv_2{
    width:4300px;
}

悬停时如何更改.imgdiv_2
仅在CSS中甚至可能吗？
我无法更改HTML结构或250px宽度。
有什么方法可以从主体中选择整个CSS路径吗？

最佳答案

因为CSS选择器只能定位元素的后代或后继兄弟，所以您不能这样做... CSS就是这样工作的。

但是在您的情况下，由于a标记是.imgdiv_2的同级，因此可以在其上设置:hover：

a:hover + .imgdiv_2{
    width:4300px;
}

也许通过在a标签中添加一个类来缩小它的范围...

Updated Fiddle

关于html - 悬停时更改其他div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26529429/