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

【问题标题】：Change border color of both divs when hover on one div in css将鼠标悬停在css中的一个div上时更改两个div的边框颜色
【发布时间】：2013-07-01 09:43:07
【问题描述】：

我有两个 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 在此先感谢:)

【问题讨论】：

标签： html css

【解决方案1】：

不幸的是，您不能（还）使用 CSS 定位 previous 同级。不过，您可以将两个 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。

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

看起来像这样；

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

【讨论】：

@MaqboolUrRahimKhan 我看到您接受的答案与我的完全相同，只是稍后发布且细节较少。那么你确实想要什么？
哦，现在明白了，现在我很困惑我应该怎么做，但你确实第一次发帖，所以现在我接受你的回答:)
@MaqboolUrRahimKhan 你对哪一部分感到困惑？我在这里做了一个demo，希望对你有帮助：jsfiddle.net/vxN97

【解决方案2】：

HTML：

<div class="anyClass">

    <div class="upper">

    </div>

    <div class="lower">

    </div>

</div>

CSS：

.anyClass:hover div{
    border:1px solid #ccc;
}

只需添加一个带有 anyClass 的容器来保存您的 div 然后添加css

【讨论】：

非常感谢好友 :) 我不知道为什么其他人不同意您的回答...非常感谢

【解决方案3】：

需要为上层div类添加hover：

.uperdiv:hover

FIDDLE

【讨论】：

【解决方案4】：

看看：

html:

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

css:

   .upperdiv, .lowerdiv{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }

    .upperdiv:hover, .upperdiv:hover+.lowerdiv{
        border-color: red;
    }

这有点简化，但这是你想要的。

小提琴：http://jsfiddle.net/b58CU/

【讨论】：

【解决方案5】：

试试这个

.uperdiv:hover, .uperdiv:hover + .lowerdiv{
border-color:#9900ff;    
}

DEMO

【讨论】：