jquery - Jquery Hover 状态未在翻转时显示

Question

我有一些似乎不起作用的 jquery 代码......

当我翻转图像时，我希望显示标题，但事实并非如此。

请看演示 http://jsfiddle.net/3Raar/4/

$(".social-popup-btn").hover(function(){
        $(".social-name-popup").show();
    }, function(){
        $(".social-name-popup").hide();
    })

任何帮助都会很棒！

Answer 1

您的标记有些无效。尝试这个：

<ul class="social-signin-livfeed">
    <li>
        <a href="#" class="facebook-tab-signin social-popup-btn">Facebook</a>
        <p class="social-name-popup">Facebook</p>
    </li>
    <li>
        <a href="#" class="twitter-tab-signin social-popup-btn">Twitter</a>
        <p class="social-name-popup">Twitter</p>
    </li>
    <li>
        <a href="#" class="instagram-tab-signin social-popup-btn">Instagram</a>
        <p class="social-name-popup">Instagram</p>
    </li>
    <li>
        <a href="#" class="google-tab-signin social-popup-btn">G+</a>
        <p class="social-name-popup">Tumbler</p>
    </li>
    <li>
        <a href="#" class="pinterest-tab-signin social-popup-btn">pinterest</a>
        <p class="social-name-popup">Pinterest</p>
    </li>
    <li>
        <a href="#" class="youtube-tab-signin social-popup-btn">Youtube</a>
        <p class="social-name-popup">Youtube</p>
    </li>
    <li class="last">
        <a href="#" class="chartego-tab-signin social-popup-btn">Chartego</a>
        <p class="social-name-popup">Chartego</p>
    </li>
</ul>

和：

$(function(){
    $(".social-name-popup").hide();

    $(".social-popup-btn").hover(function(){
        $(this).siblings(".social-name-popup").show();
    }, function(){
        $(this).siblings(".social-name-popup").hide();
    });
});

Answer 2

HTML 列表项元素 ( <li>) 用于表示列表项。它应该包含在有序列表 ( <ol>)、无序列表 ( <ul>) 或菜单 ( <menu>) 中，其中它表示该列表中的单个实体。

- Mozilla 开发者网络

我建议重写您的 html 以使其有效，但是，似乎解决此问题的最佳方法是简单地使用自定义工具提示插件。我推荐使用jQueryUI 的 Tooltip。然后，您需要做的就是更改title每个<a>.

以下是您将如何实现它：

DEMO

JAVASCRIPT：

$(function(){
    $(document).tooltip();
});

HTML：

<ul class="social-signin-livfeed">
    <li> 
        <a href="#" class="facebook-tab-signin social-popup-btn" title="Facebook">Facebook</a>
    </li>
    <li> 
         <a href="#" class="twitter-tab-signin social-popup-btn" title="Twitter">Twitter</a>
    </li>
    <li> 
         <a href="#" class="instagram-tab-signin social-popup-btn" title="Instagram">Instagram</a>
    </li>
    <li> 
         <a href="#" class="google-tab-signin social-popup-btn" title="G+">G+</a>
    </li>
    <li> 
         <a href="#" class="pinterest-tab-signin social-popup-btn" title="pininterest">pinterest</a>
    </li>
    <li> 
         <a href="#" class="youtube-tab-signin social-popup-btn" title="Youtube">Youtube</a>
    </li>
    <li class="last">
         <a href="#" class="chartego-tab-signin social-popup-btn" title="Chartego">Chartego</a>
    </li>
</ul>

希望这会有所帮助，如果您有任何问题，请告诉我。