html - 将鼠标悬停在 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>

我试过 + 号，但是当我将鼠标悬停在上层 div 上时它会改变下层 div 的边框颜色...你可以说我想创建一个 div 的效果。现在我不知道..有什么办法吗？并且请不要仅使用 jquery 和 javascript css 和 css3提前致谢:)

Answer 1

不幸的是，您不能(还)使用 CSS 定位previous 兄弟。不过，您可以将两个 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。

---

我们将来可以在没有容器的情况下使用 subject indicator 来做到这一点

看起来像这样；

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