Как расположить изображение с эффектом наведения jquery? - PullRequest
Новая
       10

Как расположить изображение с эффектом наведения jquery?

0 голосов
/ 15 октября 2011 
    <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>

Итак, у меня есть эффект наведения изображения на моем изображении, и он работает нормально. НО я пытаюсь опубликовать его там, где я хочу, потому что теперь он находится в левом верхнем углу. Как я могу расположить изображение в центре? или вообще где я хочу? пробовал с простыми центральными метками, но не работает Есть идеи?

Ответы [ 2 ]

0 голосов
/ 15 октября 2011

Чтобы расположить изображение в центре, используйте: 

div.fadehover {
    position: relative;
    width: 200px; /* replace with actual width */
    margin-left: auto;
    margin-right: auto;
}
0 голосов
/ 15 октября 2011

Поместите изображения в свои собственные div-ы внутри .fadehover 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>
...