1 Replies - 428 Views - Last Post: 04 June 2012 - 10:15 AM

#1 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

2 Divs, Want to change background of both when 1 is hovered.

Posted 04 June 2012 - 08:16 AM

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!

Is This A Good Question/Topic? 0
  • +

Replies To: 2 Divs, Want to change background of both when 1 is hovered.

#2 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

Re: 2 Divs, Want to change background of both when 1 is hovered.

Posted 04 June 2012 - 10:15 AM

got this solved now with

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


:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1