Re: rollover image in a div does not work

Harry Bellafonte wrote:
Hi

I have menu list that are in div tags.

If it's alist, where are the <ul> and <li> elements?

I want an image to appear when
I move over the menu item or click on it. I am trying it with the html
code and css style below. It does not work, the image is not
appearing. What must I change in my html or css code?

<div class="menutitle active">
<a href="/wps/wcm/connect/nl/Products/">Products</a>
</div>

Maybe you'd prefer <div class="menutitle" id="active">.

[snippage]

<div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
Equipment/">Equipment</a>
</div>

div#menutitle a:active{background-image: url(/wps/wcm/connect/
button_rollover_state.jpg?);}

div#menutitle refers to div(s) with an id of menutitle, but you don't have any of those. For the markup you typed or pasted here, a better rule would look like:

div.menutitle a:hover {
background-image: url(/wps/wcm/connect/button_rollover_state.jpg);}

Note that my CSS lacks question marks. I would get rid of extra spaces in my markup's class names, too. Have you validated your actual code (HTML and CSS)?

HTH.

--
John
Trying so hard to ignore posts from GoogleGroups.
UIP: http://improve-usenet.org/
.

Relevant Pages