Question

我尝试了以下代码：

<script type="text/javascript">     
 $(document).ready(function(){ 
   $("image").hover(
      function () {
        $(this).append($("<span> ***</span>"));
      }, 
      function () {
        $(this).find("span:last").remove();
      }
    );

  });

<img  alt="" src="../../Content/Disp.gif" />

它不起作用。甚至使用$（“img”）。这是否意味着悬停不适用于图像？

Answer 1

你可以试试这个：

$("img").each(function(){
    $(this).hover(function(){
        $(this).after("<span>Foobar</span>");
    }, function(){
        $(this).find("span:last").remove();
    });
});

Answer 2

此代码存在一些问题首先选择器不正确：
错了

$('image')

正确

$('img')

其次，据我所知，img元素不能包含子元素，因此你不能使用“find”命令。

 $(document).ready(function(){ 
   $("img").hover(
      function () {
        $(this).append($("<span>***</span>"));
      }, 
      function () {
        $(this).find("span:last").remove(); // this not correct
      }
    );

  });

Answer 3

您无法将某些内容附加到自动结束标记

<img src="lol.gif" alt="" /> is a self-closing tag.
You can only append to not self closing tags like <div></div>

Answer 4

    <script type="text/javascript">
    $(document).ready(function(){
        $('img').hover(function(){
            $('span').html('Mouse over image'); 
        });
        $('img').mouseout(function(){
            $('span').html('Mouse not over image'); 
        });
    });
</script>  

<img  alt="" src="http://stackoverflow.com/content/img/so/logo.png" />
<span>Mouse not over image</span>

Answer 5

<script type="text/javascript">     
 $(document).ready(function(){ 
   $("img").hover(
      function () {
        $(this).after("<span> ***</span>");
      }, 
      function () {
        $(this).next().remove();
      }
    );
  });
</script>

<img alt="" src="../../Content/Disp.gif" />

请阅读api.jquery.com，这是一个相当快速的阅读，因为图书馆有点小。

悬停不适用于图像？

5 个答案: