CODEWITHSUNDEEP
htmlcssfirefox
Babiker
Babiker

Reputation: 18798

CSS :hover not working

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style type='text/css'>
            #body{
                margin:0px;
            }


            #headerDiv{

                background-color:#e0e2eb;
            }
            .header_innerHeaderDivs{
                border:solid 1px gray;
                display:inline;
                font:normal 11px tahoma;
                color:black;
            }
            .header_innerHeaderDivs:hover{
                padding:4px;
            }
        </style>
    </head>
    <body id='body'>
        <div id='headerDiv'>
            <div class='header_innerHeaderDivs'>Comapny</div>
            <div class='header_innerHeaderDivs'>Edit</div>
            <div class='header_innerHeaderDivs'>Inventory</div>
            <div class='header_innerHeaderDivs'>Logout</div>
        </div>
    </body>
</html>

Using FireFox 3.6.3

Upvotes: 6

Views: 101495

Answers (8)

Akseli Pal&#233;n
Akseli Pal&#233;n

Reputation: 28151

To mention about a possible case not covered by the other answers, one possibility for the hover to work inconsistently in Firefox is that there is a mouseover event listener that reorders the hovered element in DOM, for example with appendChild. The instant addition after removal causes the element to lose hover state and while Chrome restores the hover state (given that the cursor still points the element), Firefox does not.

If this is the case for you, possible solutions include:

  • simulate triggering :hover with a mouse event
  • add/remove a class (like .hover) instead of :hover
  • instead of moving the element, move its siblings.

The mouseover is obviously not the issue in the code snippet of the question but this answer might be useful for someone like me looking for possible cases where hover acts unexpectedly in Firefox.

Tested on Chrome 118, Firefox 114, macOS 13.6.

Upvotes: 0

user2298124
user2298124

Reputation: 357

For me it was to do with css specificity. It worked after adding !important

Upvotes: 1

edo4hy
edo4hy

Reputation: 31

I have been having this issue as well. It seems that everything within the div changes in :hover but not the div itself. So you can have an encasing div which affects the :hover. 

<div class="hoverChange"><div class='header_innerHeaderDivs'>Comapny</div></div>

And then the css

.hoverChange :hover{
    padding: 4px;
}

Upvotes: 3

nurdyguy
nurdyguy

Reputation: 2945

If you are using IE then you'll need to add <!DOCTYPE html> to the top. Otherwise IE is extra picky and will only recognize :hover on anchor tags.

EDIT: Non-CSS alternative (using jQuery .bind):

    <script> 
      $('.header_innerHeaderDivs').bind('mouseenter', 
        function(event){ 
           $(event.target).css('background-color', 'yellow');
      });
      $('.header_innerHeaderDivs').bind('mouseleave', 
        function(event){ 
           $(event.target).css('background-color', 'blue');
      });
     </script>

I wouldn't put it in a script tag in the middle of your html file as in the code block (better off in a js file) but you get the idea. I'd rather use pure CSS myself, but this is an option.

Upvotes: 0

edl
edl

Reputation: 3214

You might try:

#headerDiv div:hover{padding:4px;}

EDIT:

If you want the parent div to expand set display of .header_innerHeaderDivs to inline-block. Also, as mentioned above, you might want to set your dtd declaration to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or the html4.01 transitional variant.

Upvotes: 4

crimson_penguin
crimson_penguin

Reputation: 2778

Works in Safari. Are you testing in IE, where :hover only works on a elements?

EDIT: I tested in Firefox, and it doesn't work there (works in Opera though). Using div.header_innerHeaderDivs fixes it... Maybe you can't use pseudo-selectors on just classes? It is valid though; might be a browser bug.

Upvotes: 0

prodigitalson
prodigitalson

Reputation: 60413

If you switch the doctype to XHTML transitional or above it works. IT might also work with HTML strict as well though i didnt try that. As a general ruel though you want to use a tags for hovers unless you are dictating the action via a js even handler.

Upvotes: 0

corroded
corroded

Reputation: 21564

if that is a nav bar, it's better to just use a list of links(its more semantic that way) so your hover also works in ie( :hover only works for a elements in ie)

<ul id='header-nav'>
  <li><a>Comapny</a></li>
  <li><a>Edit</a></li>
  <li><a>Inventory</a></li>
  <li><a>Logout</a></li>
</ul>

then

#header-nav {
  background-color:#e0e2eb;
}

#header-nav a {
  border:solid 1px gray;
  display:inline;
  font:normal 11px tahoma;
  color:black;
}

#header-nav a:hover {
  padding: 4px.
}

also a tip: try to refrain from using "div" as part of a class name. it's not that helpful/descriptive in semantics :)

Upvotes: 3

Related Questions