Question

嗨，我有一个img，当我将鼠标悬停在它上面时，我希望它取消隐藏div，但它不起作用。这是我的尝试。

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

这是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

您的ID和班级不能有空格。

<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

尝试删除id和类中的空格。该班实际上是两个班：鳄鱼+中华

Answer 3

嗯，除了标记问题之外，我不认为你可以将img悬停在一个带有display:none;的div中。所以你需要为它创建一个父div。

关于Class / Id，你不能拥有一个带有空格的空格的ID，在类中它意味着2个不同的类。因此，请删除空格（就像我一样，或使用_，如：Alligator_sinensis

检查here

我会建议：

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

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

Jquery悬停获取Id问题

3 个答案:

检查here