Question

我想影响单个:hover上的多个div。例如，两个div相互左右浮动。当其中一个:hover语句被激活时（或者，可能超过父div）时，我希望他们都改变宽度，颜色，不透明度等。

<div id='maincontainer'>
    <div id='mainleft'>
     Left div that shrinks on maincontainer:hover
    </div>
    <div id='mainright'>
    Right div that grows on maincontainer:hover
    </div>
</div>

我需要一个容器div吗？仅在CSS中这是否可能？

Answer 1

只需使用

#maincontainer:hover #mainleft { ... }
#maincontainer:hover #mainright { ... }

并正确更改您的CSS。这将适用于除IE＆lt; 7以外的所有地方，只允许hover元素<{1}}

您还可以考虑在较新的浏览器上触发CSS转换，以便内部div的大小逐渐变化。

Answer 2

通过使用这个CSS可能

#maincontainer:hover #mainleft{
 width: 100px;   
}

#maincontainer:hover #mainright{
 width: 200px;   
}

Answer 3

这就是你用javascript来做到这一点的方法我更喜欢javascript，因为较旧的浏览器限制只悬停到锚标签

document.getElementById("maincontainer").onmouseover = func;

function func(event){
     document.getElementById("mainleft").style.width = newwidth + px;
     document.getElementById("mainright").style.width = newwidth + px;
}

Answer 4

尝试将这两种情况都应用于css：

#maincontainer > div:hover { *your css* }

Answer 5

当#maincontainer:hover #mainleft悬停时，

mainleft css选择器会匹配maincontainer div。

在<div>中调用：hover selector </div>

5 个答案: