SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Rollover Question


    As seen in the quick example I created above, I need to create rollover links (which are in a list by the way) that change the background image of a different <DIV>.

    Like I mentioned, my navigation is in a list like this:
    HTML Code:
    <div id="nav">
    	<ul>
    	<li><a href="#"><img src="images/nav_varietyshow.gif" alt="The Variety Show" /></a></li>
    	<li><a href="#"><img src="images/nav_assassinationx.gif" alt="The Assassination of X" /></a></li>
    	<li><a href="#"><img src="images/nav_morningcalm.gif" alt="Land of the Morning Calm" /></a></li>
    	<li><a href="#"><img src="images/nav_canvas.gif" alt="Canvas" /></a></li>
           </ul>
    </div>
    When I hover over the navigational list items I need the background image in the #header <DIV> to change.

    How can this be accomplished?

    Thanks in advance ,

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll read that over and see how it turns out. Thank you!

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've got it working perfectly in Firefox but not in IE.

    Anyone have any ideas?

    View site

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hover doesn't work in IE except on pseudo classes (anchors). You need to use something like the whatever:hover for IE.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    for a image use visibility:hidden; visibility:visible;

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>EHAComics.com</title>
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	body{
    	background:#131823;
    	font: 8pt/11pt Georgia, serif; 
    	color:#4B4C4B; 
    	text-align: center; 
    	}
    	
    	#shadows{
    	width:815px;
    	background:#131823 url('images/outer_shadows.gif') repeat-y 1px 0;
    	margin:0 auto;
    	text-align:left;
    	}
    	
    	#wrapper{
    	width:780px;
    	margin:0 auto;
    	}
    	
    	#logo{
    	background: #2E2E2E url('images/logo.gif') no-repeat; 
    	height:46px;
    	}
    	
    	#comic-nav{
    	position:relative;
    	background:#000 url('images/comicnav_bg.gif') no-repeat;
    	width:345px;
    	height:187px;
    	text-align:right;
    	float:left;
    	}
    	
    	#header{
    	background: url('images/default_header.gif') no-repeat; 
    	width:435px;
    	height:187px;
    	float:right;
    	}
    	
    	#comic-nav ul{list-style:none;}
    	
    	#comic-nav li{float:right;margin:0 0 3px 0;}
    	
    	#comic-nav li a{
    	float:right;
    	text-decoration:none;
    	display:block;
    	width:226px;
    	height:33px;
    	overflow:hidden;
    	}
    	
    	#comic-nav li a:hover{visibility:visible;}
    	
    	#variety-show a{background: url('images/nav_varietyshow.gif') no-repeat;}
    	#assassinationx a{background: url('images/nav_assassinationx.gif') no-repeat;}
    	#morningcalm a{background: url('images/nav_morningcalm.gif') no-repeat;}
    	#canvas a{background: url('images/nav_canvas.gif') no-repeat;}
    	#providence a{background: url('images/nav_providence.gif') no-repeat;}
    
    	#comic-nav a img{visibility:hidden;}
    	#comic-nav img{border:none;}
    
    	#comic-nav a:hover img{
    	visibility:visible;
    	position:absolute;
    	top:0px;
    	left:345px;
    	background:#009933;
    	cursor:pointer;
    	}
    	</style>
    </head>
    <body>
    
    <div id="shadows">
    <div id="wrapper">
    <div id="logo"></div>
    <div id="comic-nav">
    
    <ul>
    <li id="variety-show">
    <a href="varietyshow.html"><img src="images/varietyshow_header.gif" alt="" /></a>
    </li>
    <li id="assassinationx">
    <a href="assassinationx.html"><img src="images/assassinationx_header.gif" alt="" /></a>
    </li>
    <li id="morningcalm">
    <a href="morningcalm.html"><img src="images/morningcalm_header.gif" alt="" /></a>
    </li>
    <li id="canvas">
    <a href="canvas.html"><img src="images/canvas_header.gif" alt="" /></a>
    </li>
    <li id="providence">
    <a href="providence.html"><img src="images/providence_header.gif" alt="" /></a>
    </li>
    </ul>
    
    </div>
    <div id="header"></div>
    </div>
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Feb 27, 2006 at 13:30.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As all4nerds said IE only activates the nested span styles when something is changed in the anchor also.

    The easiest way to fix this is simply to use the following.
    Code:
    a:hover{visibility:visible}


Bookmarks

Posting Permissions

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