Question

我有社交媒体按钮。这是代码：

<div id="icons">
        <a href="#twitter"><img src="images/twitter.png"></a>
        <a href="#facebook"><img src="images/facebook.png"></a>
        <a href="#tumblr"><img src="images/tumblr.png"></a>
        <a href="#pinterest"><img src="images/pinterest.png"></a>
        <a href="#instagram"><img src="images/instagram.png"></a>
        <a href="#vk"><img src="images/vk.png"></a>
</div>

我想在鼠标悬停右侧显示图标，取决于指针所在的位置。例如，如果鼠标悬停在Facebook上，则在Facebook图标旁边显示文本。这是文本代码：

<div id="icons-text">
    <div class="hover-text">Like us on Twitter</div>
    <div class="hover-text">Like us on Facebook</div>
    <div class="hover-text">Follow us on Tumblr</div>
    <div class="hover-text">Follow us on Pinterest</div>
    <div class="hover-text">Follow us on Instagram</div>
    <div class="hover-text">Like us on VK</div>
</div>

我想在jQuery中控制它。我有代码：

$(function() {
     $('.hover-text').hide();
     $('#icons').hover( function() { $('.hover-text').toggle(); } );
});

CSS代码：

#icons-text {
    position: fixed;
    top: 50%;
    left: 50px;
    right: 0;
    margin-right: auto;
    margin-left: 10px;
    height: 300px;
    z-index: 999999;
}

.hover-text {
    display: none;
    font-family: 'Roboto', Helvetica, Arial;
    font-size: 9pt;
    height: 48px;
    line-height: 48px;
}

如何在代码中选择此元素并正确显示文本？

Answer 1

使用：

$('#icons a').hover( function() { 
   $('.hover-text').eq($('#icons a').index($(this))).show();
} , function() { 
   $('.hover-text').eq($('#icons a').index($(this))).hide();
});

<强> Demo

悬停的jQuery显示多个元素的文本

1 个答案: