Login/Register
CSS :hover not working
Asked Answered
Solved htmlcssfirefox
M

8

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

Mathildamathilde answered 28/5, 2010 at 2:58 Comment(2)
I think having these div's set to inline might be causing any undesired behavior. But I can't say for sure since you haven't actually stated a question or provided any information besides your code. – Pinero
D_N: the :hover has no effect in (at least) Firefox. Scott: I tried removing the display: inline, and that didn't change anything. It appears it's a problem with the selector. – Prevailing
V
3

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 :)

Vergara answered 28/5, 2010 at 3:5 Comment(1)
I found the word "semantics" confusing for a very long time, even when I looked up the definition. Why can't we just use the word "labelling", "class naming", or something similar? – Gwendolyngweneth
T
4

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.

Tornado answered 28/5, 2010 at 3:4 Comment(2)
This works, but instead of expanding #headerDiv along with the padding, it expands the inner divs only as if they had a higher z-index. – Mathildamathilde
@Prevailing I think you're right. Well IE6 and IE7 anyway. I think IE8 will support it. – Tornado
V
3

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 :)

Vergara answered 28/5, 2010 at 3:5 Comment(1)
I found the word "semantics" confusing for a very long time, even when I looked up the definition. Why can't we just use the word "labelling", "class naming", or something similar? – Gwendolyngweneth
B
3

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;
}
Burack answered 3/11, 2016 at 12:42 Comment(0)
M
1

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

Mitchum answered 12/7, 2022 at 12:22 Comment(0)
P
0

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.

Prevailing answered 28/5, 2010 at 3:2 Comment(0)
S
0

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.

Shout answered 28/5, 2010 at 3:7 Comment(0)
P
0

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.

Putto answered 7/1, 2015 at 22:18 Comment(0)
E
0

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.

Escorial answered 26/10, 2023 at 20:11 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.