Question

当用户将鼠标悬停在另一个元素上时，我想改变元素的CSS - 纯CSS没有JS。

我确信这是可能的，我确定我之前已经完成了......现在无法让它工作。

我有两个DIV。

一个已经有了盒子阴影而另一个没有。

当用户盘旋在没有阴影的那个上面时，我希望DIV获得盒子阴影而另一个失去它的阴影......反之亦然当用户将鼠标从第二个DIV上移开时

.div1 {background: #24D4F9;-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);}

.div2{} /* No Shadwow */

.div2:hover {-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);} /* This bit works */

.div2:hover .div1{-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0);} /* This bit doesn't work */

写最后一位的正确方法是什么？

由于

Answer 1

你需要改变div的顺序然后才有可能:) http://jsfiddle.net/zcw8bdnq/

HTML：

<div class="div2">Test text div 2</div>
<div class="div1">Test text div 1</div>

CSS：

.div1, .div2 {
    height: 100px;
    margin-bottom: 30px;
}
.div1 {background: #24D4F9;-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);}

.div2{}

.div2:hover + .div1 {-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);}

.div2:hover {-webkit-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);
box-shadow: -3px 8px 29px 0px rgba(0,0,0,0.75);}

将鼠标悬停在其他元素上时更改元素的CSS

1 个答案: