...

View Full Version : 2 Divs, Want To Change Background Of Both When 1 Is Hovered.



HapticThreek
06-04-2012, 05:35 PM
Hey folks, I'm making a control panel for the back-end of a website I'm building. I've got it looking almost exactly how I want it to, apart from this.

I have 2 divs per control panel item, one for the picture, and one for the corresponding text. At the moment I have it set up so that when the div is hovered over the background changes on that div, but what I want is for if the picture is hovered over then the background will change on both the picture and corresponding text's div. Is this possible? I don't think I can have them in the same div because I won't be able to get them positioned properly unless they're separate. Here's the code for it and the css for it:



<div id="controlWrap">
<h2 style="text-align:center; text-decoration:underline; font-weight:bold; font-size:1.8em;">Control Panel</h2>
<ul class="controlul">
<li>
<div class="controlItem">
<a href="admin?mail"><img class="control hov" src="images/email.png">
</div>
<div class="controltext hov">Send Newsletter</div></a>
</li>
<li>
<div class="controlItem">
<a href="admin?add"><img class="control hov" src="images/plus.png">
</div>
<div class="controltext hov">Add Products</div></a>
</li>
<li>
<div class="controlItem">
<a href="admin?edit"><img class="control hov" src="images/edit.png">
</div>
<div class="controltext hov">Edit Products</div></a>
</li>
<li>
<div class="controlItem">
<a href="admin?delete"><img class="control hov" src="images/delete.png">
</div>
<div class="controltext hov">Delete Products</div></a>
</li>
<li>
<div class="controlItem">
<a href="admin?users"><img class="control hov" src="images/users.png">
</div>
<div class="controltext hov">Manage Users</div></a>
</li>
</ul>
</div>

/* Control Panel */
#controlWrap {
width:600px;
margin-top:30px;
margin-bottom:30px;
background:white;
border:1px solid #f1f1f1;
border-radius:20px;
box-shadow:2px 2px 5px #999;
padding:16px 10px;
float:left;
}

#controlWrap .control {
float:left;
padding:20px;
border:1px solid #f1f1f1;
border-radius:5px;
}

#controlWrap .controlul {
float:left;
}

.controlul li {
float:left;
}

#controlWrap .controltext {
position:relative;
float:left;
width:111px;
text-align:center;
font-family:Arial;
font-weight:bold;
border:1px solid #f1f1f1;
padding:2px;
border-radius:5px;
}

.hov:hover {
background-color:#f1f1f1;
}

Hope someone can help. I hope it's possible :P Thanks!

SeattleMicah
06-04-2012, 05:52 PM
some JavaScript will do that easily for you.

aaronhockey_09
06-04-2012, 05:55 PM
You dont need the .hov class,
You should be able to make it like this.


<ul class="controlul">
<li>
<div class="controlItem">
<a href="admin?mail"><img class="control" src="images/email.png">
</div>
<div class="controltext hov">Send Newsletter</div></a>
</li>

with this css

.controlul li:hover .controlItem, .controlul li:hover .controltext { background-color:#f1f1f1; }

Let me know if that helps
cheers

HapticThreek
06-04-2012, 06:08 PM
You dont need the .hov class,
You should be able to make it like this.


<ul class="controlul">
<li>
<div class="controlItem">
<a href="admin?mail"><img class="control" src="images/email.png">
</div>
<div class="controltext hov">Send Newsletter</div></a>
</li>

with this css

.controlul li:hover .controlItem, .controlul li:hover .controltext { background-color:#f1f1f1; }

Let me know if that helps
cheers

Ahhhhh well done man, this works perfectly, and I have been trying to do this for a couple of days now! Thanks a lot :D

aaronhockey_09
06-04-2012, 06:14 PM
Ahhhhh well done man, this works perfectly, and I have been trying to do this for a couple of days now! Thanks a lot :D
Not a problem :D
have a great day.

ChrisTrader
06-05-2012, 06:29 AM
This is an excellent idea and answer...props!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum