图像褪色

我能得到一些帮助，在这里请图像褪色

我得到的工作只有一个图像的代码，但不能为不同内容的多个图像

HTML

<ul id="base"> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
</ul>

CSS

.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;} 
.element img { 
     position:absolute; 
     top:0; 
     left:0; 
     height:150px; 
     width:150px; 
    } 
.content {height:150px;width:150px;background:gray;font-size:9px;}

jQuery的

$(".element").hover(function() { 
     //fadeout first image using jQuery fadeOut 
     $(".img1").fadeOut(300); 
     //fadein second image using jQuery fadeIn 
     $(".content").fadeIn(300); 
    }, function() { 
     //fadeout second image using jQuery fadeOut 
     $(".img1").fadeIn(300); 
     //fadein first image using jQuery fadeIn 
     $(".content").fadeOut(300); 
    });

和测试http://jsfiddle.net/nQvay/1/小提琴，需要一些帮助

来源

2013-02-08 Francis Alvin Tan

您必须指定其.img1和.content你想成为褪色

$(".element").hover(function() { 
      //fadeout first image using jQuery fadeOut 
      $(this).children(".img1").fadeOut(300); 
      //fadein second image using jQuery fadeIn 
      $(this).children(".content").fadeIn(300); 
     }, function() { 
      //fadeout second image using jQuery fadeOut 
      $(this).children(".img1").fadeIn(300); 
      //fadein first image using jQuery fadeIn 
      $(this).children(".content").fadeOut(300); 
     });

来源

2013-02-08 11:24:26

你好，进出口与这个jQuery不是很好，但如果你可以更新小提琴，会被罚款 – 2013-02-08 11:27:39

http://jsfiddle.net/nQvay/26/，CSS也改变 – 2013-02-08 11:50:22

感谢，它的工作 - TaronPro – 2013-02-09 06:49:03

试试这个

JSFIDDLE

$(document).ready(function(){ 
$(".element").hover(function() { 
      //fadeout first image using jQuery fadeOut 
      $(".element").children(".img1").fadeOut(300); 
      //fadein second image using jQuery fadeIn 
      $(".element").children(".content").fadeIn(300); 
     }, function() { 
      //fadeout second image using jQuery fadeOut 
      $(".element").children(".img1").fadeIn(300); 
      //fadein first image using jQuery fadeIn 
      $(".element").children(".content").fadeOut(300); 
     }); 
});

来源

2013-02-08 11:27:58 Nandu

盒子上的两个内容同时出现，当悬停时只有一个盒子显示内容时，它可能是... – 2013-02-08 11:32:34

<ul id="base"> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
<li class="element" > 
<img src="http://farm8.staticflickr.com/7040/6818412114_261c73da06_z.jpg" class="img1" /> 
<div style="display:none;" class="content">this is a text message 2</div> 
</li> 
</ul> 


<style> 
ul{ 
padding:0px; 
margin:0px; 
list-style:none; 
} 
.element {float:left;margin-right:15px;border:1px solid red;width:150px;height:150px;position:relative;} 
.element img { 
     position:absolute; 
     top:0; 
     left:0; 
     height:150px; 
     width:150px; 
    } 
.content {height:150px;width:150px;background:gray;font-size:9px;} 
</style> 


<script> 
$(".element").hover(function() { 
     //fadeout first image using jQuery fadeOut 
     $(this).children(".img1").fadeOut(300); 
     //fadein second image using jQuery fadeIn 
     $(this).children(".content").fadeIn(300); 
    }, function() { 
     //fadeout second image using jQuery fadeOut 
     $(this).children(".img1").fadeIn(300); 
     //fadein first image using jQuery fadeIn 
     $(this).children(".content").fadeOut(300); 
    }); 
</script>

来源

2013-02-08 18:36:31

回答

相关问题