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定位之前的兄弟。您可以将两个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;
}

Answer 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

Answer 3

您需要为上部div类添加悬停：

.uperdiv:hover

<强> FIDDLE

Answer 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/

Answer 5

试试这个

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

<强> DEMO

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

5 个答案:

HTML

CSS