How to show different images using .hover() jQuery

Question

I'm gonna try to explain my issue:

I have span elements, each span element have text, when the user hovers it, it should displays an image next to the element, each image is different, I was trying to use jQuery .hover() function, but when I hover on the text it shows me the whole images.

How can I solve it?.

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

My Code.

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

Thanks!.

Answer 1

You could associate the span with a particular image via a data attribute and id.

 $(".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> 

Answer 2

I try don´t change your html

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

I add a little css as well for hide the elements from the origin

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

Answer 3

我建议您更好地使用css3而不是jquery，因为cos jquery会降低您的网站在移动设备上的生产力，因此也许您应该看看此处在此处输入链接描述

Answer 4

You need to find common ground between your span & image and without adding anything extra in your markup, that would be the index value of each of them. Obviously, this solution that I recommend below is entirely dependant on the order with which you lay out your HTML.

Take a look at this solution I posted for a similar problem.

So basically, your code should become something like this:

 $(".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> 

Hope it helps in some way.

T