1

我有两个 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 提前谢谢:)

4

5 回答 5

5

不幸的是，您不能（还）使用 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;
}
于 2013-07-01T09:48:36.140 回答
1

HTML：

<div class="anyClass">

    <div class="upper">

    </div>

    <div class="lower">

    </div>

</div>

CSS：

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

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

于 2013-07-01T09:52:12.797 回答
0

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

.uperdiv:hover

小提琴

于 2013-07-01T09:48:39.827 回答
0

一探究竟：

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/

于 2013-07-01T09:49:12.820 回答
0

尝试这个

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

演示

于 2013-07-01T09:49:32.263 回答