[英]no border around DIV
我希望能够在悬停时将一个图像淡入另一个图像,然后在鼠标离开对象时淡出悬停的图像。 因为它紧紧包装在DIV中我不想要它周围的任何空间,所以试图使用只是SPAN,这是无效的。 任何想法? 我的脚本如下:
<style>
.fade {
position: relative;
border: 0;
margin: 0 auto;
padding: 0;
}
.fade div {
position: absolute;
top: 0;
left: 0;
display: none;
height: 100px;
width: 240px;
border: 0;
margin: 0 auto;
padding: 0;
}
-->
</style>
<script type="text/javascript">
<!--
$(function () {
// find the div.fade elements and hook the hover event
$('span.fade').hover(function() {
// on hovering over find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to fadeOut)...
if (fade.is(':animated')) {
// ...stop the current animation, and fade it to 1 from current position
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(250);
}
}, function () {
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
fade.fadeOut(3000);
}
});
});
//-->
</script>
HTML:
<span class="fade">
<img src="theImages/sApproveBW.jpg" alt="Who we are" />
<div>
<img src="theImages/sApprove.jpg" alt="Who we are" />
</div>
</span><img src="theImages/bApprove.jpg" height=100 width=240 /><br><img src="theImages/tApprove.jpg" height=100 width=240 />
我在第一张图片下方有一个小空白区域。 无论如何要摆脱它?
看起来如何: http : //img805.imageshack.us/img805/7417/imgct.png
我想摆脱绿色图像顶部第一个图像之间的空白区域。
我的新HTML页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Fade Method 1 (two images)</title>
<style type="text/css" media="screen">
<!--
* {
margin: 0;
padding: 0;
}
img { border: 0;
display: block;
}
.fade {
position: absolute
}
.fade div {
position: absolute;
top: 0;
left: 0;
display: none;
height: 100px;
width: 240px;
}
-->
</style>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
// find the div.fade elements and hook the hover event
$('span.fade').hover(function() {
// on hovering over find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to fadeOut)...
if (fade.is(':animated')) {
// ...stop the current animation, and fade it to 1 from current position
fade.stop().fadeTo(250, 1);
} else {
fade.fadeIn(250);
}
}, function () {
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
fade.fadeOut(3000);
}
});
});
//-->
</script>
</head>
<body id="page">
<span class="fade">
<img src="theImages/sApproveBW.jpg" alt="Who we are" />
<div>
<img src="theImages/sApprove.jpg" alt="Who we are" />
</div>
</span>
<img class=t src="theImages/bApprove.jpg" height=100 width=240 />
<img class=t src="theImages/tApprove.jpg" height=100 width=240 />
</body>
</html>
但现在我有两个图像,第二个(绿色)在第一个(黑色)下面,第三个(黄色)在黑色下面。 这是一个例子: http : //img266.imageshack.us/img266/9557/imgdu.png
尝试添加: display:block
每个图像,它应该工作
我对你的代码进行了一些编辑,但这里是: http : //jsfiddle.net/nTCr4/16/
img {
display:block;
}
.fade div {
margin-top:-100px !important;
}
删除top:0px; left:0px;
top:0px; left:0px;
并添加上面的代码,这应该排序。
顺便说一下,你的空间和图像的问题是你的图像在母元素内自然对齐,以防止你可以使用你的图像CSS属性: vertical-align:middle;
这将解决它。 但这是另一个例子:
您只需要这个HTML:
<div class="fade">
<img src="" alt="" />
<img src="" alt="" />
</div>
这个CSS:
div.fade {
position: relative;
border: none;
width:240px;
height:100px;
}
div.fade img{
position:absolute;
top:0px;
left:0px;
}
和jQ:
var imgTwo = $('.fade').find('img:eq(1)');
imgTwo.hide();
$('.fade').hover(function() {
imgTwo.stop().fadeTo(300,1);
},function(){
imgTwo.stop().fadeTo(3000,0);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.