CSS Forum

**talytech** · 04-15-2012, 10:11 AM

I am trying to create a list of links that don't necessarily navigate to anything. But what I want is to hover over the link and make an image appear in the specified area on the page.

I was able to create the ul list, but I can't seem to make the images appear when I hover over the link. I also tried to hide them if you're not hovering over the link.

I'm not sure what I'm doing wrong but its not working. It seems like my ul and a href aren't picking up the css style.

Can someone help me with this please.

Here's my code:

Code:

<!DOCTYPE html>
<html>
 <head>
 <style type="text/css">
 body{
   background:black;
   line-height:140%;
}
 #imgcontainer{
   position:absolute;
   width:300px;
   height:250px;
   border:1px solid blue;
   margin:0 350px;
   z-index:-1;
   }
   
 #links{
   position:absolute;
   z-index:1;
   }
 
#links ul{
 list-style-type:none;
 margin:0;
 padding:0;
}
#links a img{
   display:none;
   }
   
#links a:hover img {
 display: block; 
 position: absolute;
    margin:0 350px;
 z-index:1;
 }
 </style>
 </head>
 <body>
<div id="links">
<ul>
<li><a href="#tips">Red Velvet</a><img src="peanutbuttermini.gif"></li>
<li><a href="#tips">Chocolate City</a><img src="chocolatecity.gif"></li>
</ul>
</div>
<div id="imgcontainer"></div>

 </body>
 </html>

**chrishirst** · 04-15-2012, 11:23 AM

CSS can only affect elements that are a child of the one (the parent) that the style or pseudo class is being applied to.

So as your hover is applied to the anchor element and the img element is a child of the <li> it won't be working.

So you either need to use adjacent sibling selectors OR apply the hover pseudoclass to the <li>.