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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing the Background on a hover for an none adjacent element

    Ok here's my problem. I have a list and when I hover an item on this list I want to change the background of a div underneath of this list. Something like this...

    Code:
    <div id="container">
    <ul>
    <li id="li1">Stuff</li>
    <li id="li2">More Stuff</li>
    <li id="li3">Even More Stuff</li>
    </ul>
    
    <div id="img"></div>
    </div>
    I tried to use ul #li1 #img and realized that the span would have to be nested in the list item, I thought of using the adjacent operator (#li1+#img), but the span is not directly after the list item.

    So any thoughts? I'm sure there is a none javascript solution for this; if there isn't I'll just have to find something else to do.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The :hover pseudo class should work with any element, but in Internet Explorer it only works with links.

    http://www.alistapart.com/articles/dropdowns/

    CATdude about IE6: "All your box-model are belong to us"

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've tried that. I just realized I forgot that in my example.

    Here is my CSS right now:

    Code:
    #site #footer #powered:hover>span #img {
    	background: url("../imgs/styles/rising/powered.png");
    }
    
    #site #footer #css:hover>span #img {
    	background: url("../imgs/styles/rising/css.png");
    
    }
    
    #site #footer #markup:hover>span #img {
    	background: url("../imgs/styles/rising/markup.png");
    }
    
    #site #footer>#img {
    	background: url("../imgs/styles/rising/powered.png");
    	width: 400px;
    	height: 100px;
    	margin: 0 auto;
    	border: 1px solid #333;
    }
    And the XHTML that corresponds to that:

    Code:
    			<div id="footer">
    				<h2><span>Geek Cred</span></h2>
    				<ul>
    					<li id="powered"><span>Pogrammed by Kurashu</span></li>
    					<li id="css"><span><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></span></li>
    					<li id="markup"><span><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a></span></li>
    				</ul>
    				<div id="img"></div>
    			</div>
    If you want to see an online example, I'll upload it later.

  • #4
    New to the CF scene
    Join Date
    May 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    are you looking to change an image or a div's background color?

    matt

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why don't you put it inside the list and use the li:hover div#imgid whatever? You can make the div have absolute positioning.

    Or you can go the javascript way.
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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