CSS3 - 从一个 div 悬停到另一个

Question

我不知道如何或者甚至有可能在将鼠标悬停在另一个 div 的 [=] 上时更改一个 div 的 child 的属性22=].

<div id='bigdiv1'>
<div id='smalldiv1'></div>
</div>
<div id='bigdiv2'>
<div id='smalldiv2'></div>
</div>

#smalldiv1:hover~#smalldiv2{
background:yellow;}

更准确地说，如何更改一个 div 的属性悬停在另一个上，而其中两个分别位于两个包装器中。是否可以仅使用 css3，如果不能 - 是否有任何其他方式来设置 html.

的样式

Answer 1

看到这个fiddle

我使用了 onmouseover 和 onmouseout 事件。

HTML

<div id='bigdiv1'>
    <div id='smalldiv1' onmouseover="chbg('yellow')" onmouseout="chbg('green')">
    </div>
</div>
<div id='bigdiv2'>
    <div id='smalldiv2'>
    </div>
</div>

JS

function chbg(color) {
    document.getElementById('smalldiv2').style.backgroundColor = color;
}

Answer 2

在css中只能改变子元素或自身的属性。

#bigdiv2:hover #smalldiv2{
    background:yellow;
}

http://jsfiddle.net/0m0468f6/7/

在这个 html 结构中，我会使用 JavaScript。

var smalldiv1 = document.getElementById('smalldiv1');
var smalldiv2 = document.getElementById('smalldiv2');

smalldiv1.onmouseover = function(event){
    smalldiv2.style.backgroundColor = 'yellow';
};

smalldiv1.onmouseout = function(event){
    smalldiv2.style.backgroundColor = 'green';
};

http://jsfiddle.net/0m0468f6/8/

Answer 3

假设您可以使用 #wrapper 元素并且只需要支持现代浏览器，那么纯 css 解决方案可能涉及 pointer-events 和 clip-path 属性

http://jsfiddle.net/kmao8uk2/4/

插入的CSS是

#wrapper { position: relative; }

#smalldiv1 {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

#smalldiv2 {
    padding-top: 0px;
    position: absolute;
    top: 0;
    padding-top: 200px;
    z-index: 1;

    -webkit-clip-path: polygon(100% 0, 100% 33%, 0 33%, 
         0 66%, 100% 66%, 100% 100%, 100% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 33%, 0 33%, 0 66%, 
         100% 66%, 100% 100%, 100% 100%, 0 100%, 0 0);    

}


#smalldiv2:hover {
    background-color:yellow;
}

我改变了你的 #smalldiv2 的大小，所以现在它是 300px 高，但是由于 clip-path 它的形状在红色部分是空的。

因此 #smalldiv1 覆盖了 #smalldiv2 但是当您将鼠标悬停在第一个时，如此定义的 cursor-pointer 属性会将 hover 事件传递给底层的元素，所以就像你实际上在徘徊 #smalldiv2.

CSS3 - 从一个 div 悬停到另一个

CSS3 - hover from one div into another

html

css

nested

hover

看到这个fiddle