将鼠标悬停在css中的一个div上时,更改两个div的边框颜色

Question

我有两个div并且我想如果我在一个div上盘旋,两个div的边框颜色应该改变...

CSS:

.uperdiv {
width:80%;
background-color:black;
margin-left:10%;
border-style:none solid none solid ;
border-width:5px; 
border-color:#fff;
border-top-style:none;
height:170px;
margin-top:-220px;
transition:border-color 2s;
-moz-transition:border-color 2s;
-webkit-transition:border-color 2s;
-o-transition:border-color 2s;
}
.uperdiv:hover + .lowerdiv{
border-color:#9900ff;
}   
.lowerdiv {
border-style:none solid solid solid ;
border-color:#fff;
border-width:5px;
background-color:black;
width:80%;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
height:50px;
margin-left:10%;
}

HTML

<div class="uperdiv">
Some text
</div>
<div class="lowerdiv">
</div>

我试过+符号,但是当我将鼠标悬停在uper div上时,它会改变较低的div边框颜色......你可以说我想创建一个div的效果.现在我不知道..有什么办法吗？并且PLZ不使用jquery和javascript只有css和css3在此先感谢:)

Answer 1

不幸的是,你不能(还)使用CSS来定位前一个兄弟.但是,您可以将两个divs放在一个容器中,并将:hover应用于该容器.

HTML

<div class="container">
    <div class="upperdiv">
        Some text
    </div>
    <div class="lowerdiv">
        Some text 2
    </div>
</div>

CSS

.container:hover .upperdiv,
.container:hover .lowerdiv {
    border-color: #9900ff;
}

这样,当你徘徊要么.upperdiv或者.lowerdiv,两者都将有border-color应用.

使用主题指示器,我们可能在将来没有容器的情况下执行此操作

它看起来像这样;

.upperdiv:hover,
.upperdiv:hover + .lowerdiv,
.lowerdiv:hover,
!.upperdiv + .lowerdiv:hover { /* target .upperdiv when the next sibling is hovered */
    border-color: #9900ff;
}