将鼠标悬停在社交按钮上时，IE悬停功能不起作用

Question

Noob here so bear with me please. There are a lot of examples like this but they do not make any sense to me.

I have this table with a like button on that pops out when you hover over it. It works fine on all browsers but not IE. Any help would be greatly appreciated.

Here is my table:

     <div id="face">
            <table>
                <tr><td style="background-color:#3b5997;">
                    <table>
                    <tr>
                        <td>
                             <img alt="face" src="img/face.png" style="height: 100px;" />
                        </td>
                        <td>
<!--ADD FACEBOOK CODE HERE--><div class="fb-like" data-href="http://www.facebook.com/ThePaxtonHotel" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false" data-colorscheme="dark"></div>

                        </td>
                    </tr>
                    </table>
               </td></tr>
            </table>
          </div> 

Here is the css:

#face{
    top:60px;
    right: -55px;
    position: absolute;
}

#face:hover{
    right: 0px; 
}

Here is a fiddle: social hover

Answer 1

From what I know, older versions of IE don't support the "hover" psudeo-class on DIV elements.

Two routes i can think of are to wrap it in an "a" tag and make that your #face ID to get hover to trigger. This probably isn't going to work well for you becuase you have interactive elements inside.

The second is to have a js fallback. Check this fiddle for an example (Note: I used jquery in the example):

http://jsfiddle.net/zensign/Gr7C8/1/

JS Snippet:

if($.browser.msie)
{
    $('#face').mouseenter(function (e) {
        $(this).addClass('fallback');
    });

    $('#face').mouseleave(function (e) {
        $(this).removeClass('fallback');
    });
}