我做的是鼠标悬浮到图片 然后另一张图片出现效果 为什么我第一次有效果了 后面几次就没效果了 难道我写错了 我是先把图片hide()

Question

我做的是鼠标悬浮到图片 然后另一张图片出现效果 为什么我第一次有效果了 后面几次就没效果了 难道我写错了 我是先把图片hide() 然后鼠标hover fadeto 1 $(document).ready(function(){
 
  $("#xu001").hide();
  $("#xu002").hide();
  $("#xu003").hide();
  $("#xu004").hide();
  $("#xu005").hide();
  $("#xu006").hide();
  
 
});
$(document).ready( function() {
    $("#xf1").mouseover( function() {
        $("#xu001").fadeTo("slow", 1);
    }).mouseout( function() { $("#xu001").fadeTo("fast", 0); });
    $("#xf2").mouseover( function() {
        $("#xu002").fadeTo("slow", 1);
    }).mouseout( function() { $("#xu002").fadeTo("fast", 0); });
});
 <div style="width:125px; height:170px; float:left;">
 
 
  <div style="width:125px; height:150px;" id="xf1"><a href="xiangqing.html"><img  src="image/1/1.png" style="border:0px" /></a></div>
 <div style="width:125px; height:20px; font-weight:bold; color:#F89807; text-align:center;
 line-height:20px;"><a href="xiangqing.html">WT150</a></div>
 </div>
 <div style="width:225px; height:170px; float:left;"></div>
 <div style="width:228px; height:250px; position:absolute; left: 520px; top: 227px;" id="xu001"><img src=image/2/1.jpg /></div>
 
 
 <div style="width:125px; height:170px; float:left;">
   <div style="width:125px; height:150px;" id="xf2"><a href="xiangqing.html"><img  src="image/1/2.png" style="border:0px" /></a></div>
    <div style="width:228px; height:250px; position:absolute; left: 865px; top: 230px;" id="xu002"><img src=image/2/2.jpg /></div>

Answer 1

照这样改下试试$("#xf1").mouseover( function() {
  $("#xu001").fadeTo("slow", 1);
  });
$("#xf1").mouseout( function() { $("#xu001").fadeTo("fast", 0); });

Answer 2

这和LZ的代码
$("#xf1").mouseover( function() {
        $("#xu001").fadeTo("slow", 1);
    }).mouseout( function() { $("#xu001").fadeTo("fast", 0); });
是一样的真没看出LZ代码有啥问题 只是不要写两个$(document).ready函数