Jquery hover get Id issue

Question

Bonjour, j'ai un img et lorsque je le survole, je veux qu'il fasse disparaître un div, mais cela ne fonctionne pas. Voici ma tentative.

     $("img").hover(
          function () {
          var currentID = $(this).attr('id');
          $('.'+currentID).show();
      },
          function () {
          var currentID = $(this).attr('id');
          $('.'+currentID).hide();
      }
     );

Voici le HTML

     //intially hidden via display:none

     <div class="Alligator sinensis" style="display:none;border:solid;float:right;">

     //this is the image       
     <img id="Alligator sinensis" class="circular resultss imgs" src="http://media.eol.org/content/2013/02/20/13/27869_orig.jpg">

Answer 1

Votre ID et votre classe ne peuvent pas avoir d'espaces.

<div class="AlligatorSinensis" style="display:none;border:solid;float:right;">

 //this is the image       
<img id="AlligatorSinensis" class="circular resultss imgs" src="http://media.eol.org/content/2013/02/20/13/27869_orig.jpg">

Answer 2

Essayez de supprimer les espaces dans l'id et la classe. La classe est en fait 2 classes : Alligator + sinensis

Answer 3

Eh bien, en dehors des problèmes de balisage, je ne pense pas que vous puissiez survoler un img à l'intérieur d'un div avec display:none; . Vous devez donc créer une division parent pour cette dernière.

En ce qui concerne la classe/l'ID, vous ne pouvez pas avoir un ID avec des espaces ciblant une classe avec des espaces, dans les classes cela signifie 2 classes différentes. Donc, soit vous supprimez l'espace (comme je l'ai fait, soit vous utilisez la fonction _ comme : Alligator_sinensis

Vérifiez aquí

Je vous suggère ceci :

$("#outerdiv").hover(function () {
    var currentID = $(this).find('img').attr('id');
    console.log(currentID);
    $('.' + currentID).show();
},

function () {
    var currentID = $(this).find('img').attr('id');
    $('.' + currentID).hide();
});

et html :

<div id="outerdiv">//intially hidden via display:none
    <div class="Alligatorsinensis" style="display:none;border:solid;float:right;">//this is the image
        <img id="Alligatorsinensis" class="circular resultss imgs" src="http://media.eol.org/content/2013/02/20/13/27869_orig.jpg" />
    </div>
</div>