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

Question

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 :)

Answer 1

Unfortunately, you can't (yet) target the previous sibling using CSS. You could put the two div s 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;
}

Answer 2

HTML:

<div class="anyClass">

    <div class="upper">

    </div>

    <div class="lower">

    </div>

</div>

Css:

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

Just add a container with anyClass to hold your div's then add the css

Answer 3

You need to add hover for the uper div class:

.uperdiv:hover

FIDDLE

Answer 4

Check it out:

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;
    }

It's kind of simplified but it's what you want.

Fiddle: http://jsfiddle.net/b58CU/

Answer 5

Try this

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

DEMO