我有两个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在此先感谢:)
i have two divs and and i want if when i hover on one div, border color of both divs should be change...
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>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; }
更多推荐
发布评论