CODEWITHSUNDEEP
csshtmlinternet-explorer-7hoverhtml-table
Psyborg
Psyborg

Reputation: 11

IE7/Quirks Mode Child Div Hover Problem

Effect:

A hovering box with text and a button that appears when you hover over the TD element. In IE 7 the box will appear but disappears as soon as you try to hover over it. IE8+/FF/Ch/Sf all allow you to hover over the child DIV fine. What am I doing wrong?

Simple code:

CSS

td {
    position:relative;
    width:30px;
}

.hovering_box { 
    display:none;
    position:absolute;
    margin-left:25px;
}

td .slot:hover .hovering_box {
    display:block;
}

.hovering_box:hover {
    display:block;
}

HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <table>
    <tr>
      <td class='slot'>
        <div class='hovering_box'>
          <span class='box_title'>Title Here</span>
          <span class='box_message'>Help me!</span>
          <button>OK!</button>
        </div>
      </td>
    </tr>
  </table>
</html>

Upvotes: 0

Views: 2759

Answers (2)

thirtydot
thirtydot

Reputation: 228202

As @Lime correctly stated, IE6 doesn't support :hover on elements other than a.

To remedy this, I recommend that you use Whatever:hover:

Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser.

I think that this is a cleaner and easier option than rolling your own :hover emulation.

Upvotes: 2

Lime
Lime

Reputation: 13569

IE6 doesn't support hover on elements other then links, so you will have to use javascript to support IE6. I would advise just using some jQuery to kick IE6 and IE7 into compatibility.

$('td .slot').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

Then modify your css like so.

td .slot:hover .hovering_box,td .slot.hover .hovering_box {
    display:block;
}

.hovering_box:hover,.hovering_box.hover {
    display:block;
}

Upvotes: 5

Related Questions