如何使用 .hover() jQuery 显示不同的图像答案

【问题标题】：How to show different images using .hover() jQuery如何使用 .hover() jQuery 显示不同的图像
【发布时间】：2015-05-25 21:50:51
【问题描述】：

我将尝试解释我的问题：

我有span元素，每个span元素都有文本，当用户悬停它时，它应该在元素旁边显示一个图像，每个图像都不同，我试图使用jQuery .hover()函数，但是当我悬停时在文本上，它向我展示了整个图像。

我该如何解决？

我的 HTML。

<table>
    <tbody>
        <tr>
            <td style="width: 20%;" class="text-center">
                <span class="displayImage">Azotea </span>
                <span class="displayImage">Nivel 8 </span>>
            </td>
        </tr>
    </tbody>
</table>
<div class="col-lg-5 text-left">
    <img class="displayed" src="images/azotea-n9.jpg" alt="">
    <img class="displayed" src="images/test2.jpg" alt="">
</div>

我的代码。

$(".displayImage").hover(function(){
    $(".displayed").show();
}, function () {
    $(".displayed").hide();
});

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以通过数据属性和 id 将 span 与特定图像相关联。

$(".displayImage").hover(function(){
    // $(this).attr('data-img') == 'azotea' or 'nivel8'
    // so we end up with $('#azotea').show(), for example.
    $('#' + $(this).attr('data-img')).show();
}, function () {
  $('#' + $(this).attr('data-img')).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td style="width: 20%;" class="text-center">
                <span class="displayImage" data-img='azotea'>Azotea </span>
                <span class="displayImage" data-img='nivel8'>Nivel 8 </span>
            </td>
        </tr>
    </tbody>
</table>
<div class="col-lg-5 text-left">
    <img class="displayed" src="images/azotea-n9.jpg" alt="azotea" id="azotea">
    <img class="displayed" src="images/test2.jpg" alt="nivel 8" id="nivel8">
</div>

【讨论】：

这真的很好用，但是在我把它设置为正确的问题之前还有一个问题，你能给我解释一下代码吗？非常感谢！
我为每个跨度添加了一个 data-img 属性。该值引用图像上的相应 ID。在悬停处理程序中，我们在悬停元素上查找 data-img 属性并使用它来构造相应的 ID。例如data-img="azotea" 得到我们img#azotea。我在上面的 js 中添加了一条评论，希望能对其有所启发。

【解决方案2】：

我尽量不要改变你的 html

https://jsfiddle.net/luarmr/hjreda3r/

我还添加了一些 CSS 来隐藏原点的元素

$(".displayImage").hover(
    function(el){
        var image = $(this).data('ref');
        $(".displayed:nth-child(" + image + ")").show();
    }, function () {
        $(".displayed").hide();
    }
);

【讨论】：

【解决方案3】：

我建议您最好使用 css3 而不是 jquery，因为 jquery 会降低您网站在移动设备上的工作效率，所以也许您应该看看这里enter link description here

【讨论】：

【解决方案4】：

您需要在 span 和 image 和之间找到共同点，而无需在标记中添加任何额外内容，这将是 index 的值他们每个人。显然，我在下面推荐的这个解决方案完全取决于您布置 HTML 的顺序。

看看this solution我发布的类似问题。

所以基本上，你的代码应该是这样的：

$(".displayed").hide();
$(".displayImage").hover(function(){
  $(".displayed").eq($(this).index()).show();
},function(){
  $(".displayed").eq($(this).index()).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td style="width: 20%;" class="text-center">
                <span class="displayImage">Azotea </span>
                <span class="displayImage">Nivel 8 </span>
            </td>
        </tr>
    </tbody>
</table>
<div class="col-lg-5 text-left">
    <img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" alt="">
    <img class="displayed" src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" alt="">
</div>

希望它在某种程度上有所帮助。

【讨论】：