CODEWITHSUNDEEP
jquery
user2604754
user2604754

Reputation: 55

Jquery hover get Id issue

Hi I have an img and when I hover over it I want it to unhide a div, however It won't work. Here is my attempt.

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

Here is the 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">

Upvotes: 2

Views: 462

Answers (3)

Sergio
Sergio

Reputation: 28837

Well, apart from markup problems, I don't think you can hover a img inside a div with display:none;. So you need to create a parent div for it.

About the Class/Id you cannot have a ID with spaces targeting a Class with spaces, in classes it means 2 didfferent classes. So either remove the space (like I did, or use _ like: Alligator_sinensis

Check here

I would suggest this:

$("#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();
});

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

Upvotes: 0

Coronus
Coronus

Reputation: 587

Try removing the spaces in both the id and the class. The class is actually 2 classes: Alligator + sinensis

Upvotes: 1

nbrooks
nbrooks

Reputation: 18233

Your ID and class can't have spaces.

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

Upvotes: 3

Related Questions