Question

在悬停在其他div的孩子身上时，我无法弄清楚如何或甚至可能改变一个div的孩子的属性。

<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解决方案可能涉及switch(getIntent().getExtraString("whichFragment")) { case 1: /* add Fragment 1 */ break; case 2: /* add Fragment 2 */ break; case 3: /* add Fragment 3 */ break; case 4: /* add Fragment 4 */ break; }和pointer-events属性

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

插入的CSS是

clip-path

我更改了#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; }的大小，所以现在它的高度是300px，但是由于#smalldiv2，它的形状在红色部分是空的。

因此clip-path涵盖#smalldiv1，但当您悬停第一个时，#smalldiv2属性如此定义会将cursor-pointer事件传递给基础元素，因此它是就像你实际上正在徘徊hover。

CSS3 - 从一个div转移到另一个div

3 个答案:

请参阅此fiddle