jquery - 如何定位具有 jquery 悬停效果的图像?

标签 jquery css positioning

    <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/

相关文章:

css动态背景图片定位

html - div的css内联定位

javascript - 复选框检查 td 内嵌套复选框的所有同级

jquery - .delegate() 未绑定(bind)到 anchor 元素标签

jQuery 用户界面 : Draggable Scroll Issue

聚光灯后 jQuery 重置回 css

css - 带有 2 个导航行的顶部栏 - Zurb Foundation 5

jquery - 多个 .CSS Jquery 行

javascript - 即使包含元素,MVC + Jquery 验证器也不适用于禁用字段

html - 为什么我的导航栏图标没有出现在我的网站上?