CODEWITHSUNDEEP
htmlcss
Maqbool Ur Rahim Khan
Maqbool Ur Rahim Khan

Reputation: 105

Change border color of both divs when hover on one div in css

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

Upvotes: 1

Views: 10572

Answers (5)

xec
xec

Reputation: 18024

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

Upvotes: 5

Gokul Gopala Krishnan
Gokul Gopala Krishnan

Reputation: 323

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

Upvotes: 1

Sowmya
Sowmya

Reputation: 26969

Try this

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

DEMO

Upvotes: 0

Bas Slagter
Bas Slagter

Reputation: 9929

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/

Upvotes: 0

Danield
Danield

Reputation: 125443

You need to add hover for the uper div class: 

.uperdiv:hover

FIDDLE

Upvotes: 0

Related Questions