Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Location
    Cambridge, UK
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    2 Divs, Want To Change Background Of Both When 1 Is Hovered.

    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:


    Code:
    <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!

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    some JavaScript will do that easily for you.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    You dont need the .hov class,
    You should be able to make it like this.

    Code:
    <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
    Code:
    .controlul li:hover .controlItem, .controlul li:hover .controltext  { background-color:#f1f1f1; }
    Let me know if that helps
    cheers

  • Users who have thanked aaronhockey_09 for this post:

    HapticThreek (06-04-2012)

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Location
    Cambridge, UK
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by aaronhockey_09 View Post
    You dont need the .hov class,
    You should be able to make it like this.

    Code:
    <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
    Code:
    .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

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by HapticThreek View Post
    Ahhhhh well done man, this works perfectly, and I have been trying to do this for a couple of days now! Thanks a lot
    Not a problem
    have a great day.

  • Users who have thanked aaronhockey_09 for this post:

    ChrisTrader (06-05-2012)

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    34
    Thanks
    11
    Thanked 0 Times in 0 Posts
    This is an excellent idea and answer...props!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •