Question

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路径？

Answer 1

你不能因为CSS选择器只能定位一个元素的后代或跟随兄弟姐妹......这就是CSS的工作方式。

但是在您的方案中，由于a标记是.imgdiv_2的兄弟，您可以在其上设置:hover：

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

可能通过在a标记中添加一个类来缩小它...

Updated Fiddle

Answer 2

如果你想使用兄弟选择器，两个元素必须是兄弟姐妹：）

我编辑了你的HTML：

<div id="container">

    <div class="hover">
        <div class="imgdiv"></div>
   </div>

<div class="imgdiv_2">

</div>

这是有效的fiddle

悬停时更改其他div

2 个答案: