1

菜鸟在这里，请多多包涵。有很多这样的例子，但它们对我没有任何意义。

我有这张桌子，上面有一个喜欢的按钮，当你将鼠标悬停在它上面时会弹出。它适用于所有浏览器，但不适用于 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; 
}

这是一个小提琴：社交悬停

4

1 回答 1

0

据我所知，旧版本的 IE 不支持 DIV 元素上的“悬停”伪类。

我能想到的两条路线是将其包装在“a”标签中，并使您的#face ID 可以触发悬停。这可能不适合你，因为你里面有交互元素。

第二个是有一个js后备。检查this fiddle以获取示例（注意：我在示例中使用了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');
    });
}
于 2013-06-28T13:32:34.537 回答