如何在鼠标悬停在图片上时显示自己的文本块

Question

我正在学习HTML，我希望当我们将鼠标移动到图片中时，大象将不再显示。相反，有一个相同大小的盒子（没有边框），盒子里面有一些蓝色背景的文字。 我该如何更改我的代码？

https://fiddle.jshell.net/66j07kyg/

Answer 1

试试这个：

＆＃13;

＆＃13;

 $(document).ready(function() {
     
     $("td").mouseenter(function(){
         
         $("img").css({display:"none"});
         $(".txt").show();
          $(this).css({verticalAlign:"top",backgroundColor:"blue"})
         
     }).mouseleave(function(){
         
         $("img").css({display:"block"});
         $(".txt").hide();
         $(this).css({backgroundColor:""})
        
   })
     
 })

＆＃13;

img {
  width: 200px;
  height: 200px;
}

td {
  width: 200px;
  height: 200px;
 }
.txt {
  display: none;
  color: #fff;
 }

＆＃13;

 <table align='center'>
   <tr>
     <td>
       <img src="http://gdbaif.com/images/animal-clipart/animal-clipart-02.jpg"/>
       <span class="txt">This is some text</span>
     </td>
	</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;