[英]image fade on hover and show content
我可以在这里得到一些帮助吗
我得到的代码仅适用于一张图片,但不适用于内容不同的多张图片
的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/的小提琴,需要一些帮助
您必须指定要淡化其.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);
});
尝试这个
$(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);
});
});
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.