Question

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

当我滚动图像时，我想要显示标题，但它不是。

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

任何帮助都会很棒！

Answer 1

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


- Mozilla Developer Network

我建议重写你的html以使其有效，然而，似乎最好的方法就是使用自定义工具提示插件。我建议使用jQueryUI's Tooltip。然后，您需要做的就是更改每个title的{{1}}属性。

以下是如何实施它：

DEMO

的 JAVASCRIPT： 的

<a>

HTML：

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

希望这有帮助，如果您有任何问题，请与我联系。

Answer 2

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

<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();
    });
});

Jquery悬停状态未显示翻转

2 个答案: