将鼠标悬停在CSS中的一个div上时，更改两个div的边框颜色(Change border color of both divs when hover on one div in css)

编程入门行业动态更新时间:2024-10-25 00:28:14

我有两个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

我尝试了+符号，但是当我将鼠标悬停在uper div上时，它会改变较低的div边框颜色...并且您可以说我想创建一个div的效果。现在我不知道..有没有办法做到这一点？而PLZ不要使用jQuery和JavaScript只有CSS和CSS3在此先感谢:)

i have two divs and and i want if when i hover on one div, border color of both divs should be change...

CSS :

HTML

I tried + sign but it changes lower div border color when i hover on uper div...and you can say that i want to create effects as of one div. And now i have no idea.. is there any way to do it?? And plz don't use jquery and javascript only css and css3 Thanks in advance :)

最满意答案

不幸的是，你还不能使用CSS来定位前一个兄弟。不过，你可以将两个div放在一个容器中，然后将：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;
}
Unfortunately, you can't (yet) target the previous sibling using CSS. You could put the two divs in a container, though, and apply the :hover to that. 
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;
}
 
This way, when you hover either .upperdiv or .lowerdiv, both will have the border-color applied. 
 
We might be able to do this without the container in the future, using the subject indicator 
It would look something like this; 
.upperdiv:hover,
.upperdiv:hover + .lowerdiv,
.lowerdiv:hover,
!.upperdiv + .lowerdiv:hover { /* target .upperdiv when the next sibling is hovered */
    border-color: #9900ff;
}