<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
div.fadehover {
position: relative;
}
img.a {
position: absolute;
z-index: 10;
}
img.b {
position: absolute;
}
</style>
</head>
<body>
<div class="fadehover" align="center">
<img src="Facebook.png" alt="" class="a" />
<img src="Facebook_hover.png" alt="" class="b" />
</body>
所以我在我的图像上有这个图像淡入淡出悬停效果并且效果很好。但是我试着把它放在我想要的地方,因为现在它在左上角。如何将图像定位在中心?或者一般我想要的地方?尝试使用简单的中心标签但不起作用。有什么想法吗?
最佳答案
将图像放在 .fadehover
div 中它们自己的 div 中,并将位置样式应用于它们而不是图像。
编辑:代码如下
<script type='text/javascript'>
$(document).ready(function(){
$("div.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
<style>
div.fadehover {
position: relative;
}
div.a {
position: absolute;
z-index: 10;
}
div.b {
position: absolute;
}
</style>
<div class="fadehover">
<div class="a"><img src="yourimage1.ext" /></div>
<div class="b"><img src="yourimage2.ext" /></div>
</div>
关于jquery - 如何定位具有 jquery 悬停效果的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7773792/