Question

我会尝试解释我的问题：

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

谢谢！

Answer 1

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

＆＃13;

wx/setup.h

＆＃13;

YOUR_NUMBER = 1.234567
((int) YOUR_NUMBER * 100)/100

＆＃13;

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

Answer 3

我建议你更好地使用css3而不是jquery，cos jquery会降低你的网站在移动设备上的工作效率，所以也许你应该看看enter link description here

Answer 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>

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

Ť

如何使用.hover（）jQuery显示不同的图像

4 个答案: