当鼠标悬停在社交按钮上时,IE悬停功能无法正常工作

时间:2013-06-28 12:44:40

标签: html

Noob在这里请耐心等待我。 有很多这样的例子,但它们对我没有任何意义。

当你将鼠标悬停在它上面时,我的这个表上有一个类似的按钮。它适用于所有浏览器,但不适用于IE。任何帮助将不胜感激。

这是我的表:

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

这是css:

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

#face:hover{
    right: 0px; 
}

这是一个小提琴:social hover

1 个答案:

答案 0 :(得分:0)

据我所知,旧版本的IE不支持DIV元素上的“悬停”psudeo-class。

我能想到的两条路线是将它包装在“a”标签中,并将你的#face ID设置为悬停触发。这可能不适合你,因为你内部有互动元素。

第二个是有一个js后备。检查这个小提琴是否有例子(注意:我在示例中使用了jquery):

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

JS片段:

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

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