:hover CSS is not working?

StackOverflow https://stackoverflow.com/questions/861745

  •  21-08-2019
  •  | 
  •  

Question

I have created a CSS class as follows:

div.ycontent div.ppclisting { background-color:#cccccc; }
div.ycontent div.ppclisting:hover { background-color:#FFE5DF; }

I have applied the above style in one of my page, which is working quite fine in Firefox, IE 7.0+ and in other latest browsers. But When I am applying the same style in another page then its not working.

Can anyone tell me what could be the reason? why its not working in another page.

Was it helpful?

Solution

I got the answer why the :hover was not working on another page. Actually on second page the DOCTYPE tag was not added in the HTML page as below,

<!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">

Earlier it was simple <html> tag and due to which :hover on the div was not working. After adding doctype tag as shown above its working for me.

Thanks to all of you for help.

OTHER TIPS

Just had a similar problem. Make sure you're stacking correctly! That is, the z-index.

If it's working in one place, but not another place, then either it's not being called correctly or it's not being applied correctly.

Use Firebug, and see what properties the element that should have the styles really have. Then check the classnames for typos. Usually, that'll solve the problem as described.

Also, in IE6, :hover only works with a elements. Keep that in mind.

I am in agreeance with Brandon.

I will also add..

If you remove the:

div.ycontent

section from your lines, such that it looks like this:

.ppclisting { 
background-color:#cccccc; 
}

.ppclisting:hover { 
background-color:#FFE5DF; 
}

You may find it will work on your other page.

Why? Because you have defined these styles as 'classes'. Classes intend to apply the same style numerous times.

By placing the "div.ycontent" before it, you are essentially 'restricting'/ not utilising the pull potential of CSS classes.

Maybe the nested div in the other page doesn't have the class ycontent and/or the element itself isn't class ppclising?

I just had position:absolute on a parent break my :hover's, although it doesn't seem to be an issue as a grandparent. I'm new to all of this so I don't know if that's normal or not.

Amendment: This turned out to be a z-index issue for me. I needed to put -1 on the parent, 0 on any siblings with position specified and 1 on the divs I wanted hover activity for.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top