javascript - 当鼠标悬停在图片上时如何显示自己的文本 block

Question

我正在学习html，我希望当我们将鼠标移动到图片中时，大象将不再显示。相反，有一个相同大小的框(无边框)，框内有某些蓝色背景的文本。我应该如何更改我的代码？

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

Answer 1

试试这个:

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

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

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

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