Я пробовал много разных методов, но не работал. Что случилось с моим кодом? Пожалуйста, объясните... помощь. Мои оба изображения прозрачны, и моя идея о наведении курсора мыши затухает новым образом. Текущий код:
<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;
left: 0;
top: 0;
z-index: 10;
}
img.b
{
position: absolute;
left: 0;
top: 0;
}
</style>
<div class="fadehover">
<a href="informacija.php"><img src="images/informacija.png" alt="Informacija" class="a"/></a>
<a href="informacija.php"><img src="images/informacija_hover.png" alt="Informacija" class="b"/></a>
</div>
Я считаю, что для достижения желаемого эффекта, насколько я понимаю, вам просто нужно добавить фон для img.a
скрипка
img.a{
position: absolute;
left: 0;
top: 0;
z-index: 10;
background:#fff;
}
Решения ExceptionLimeCat хороши, но только для ярких/блестящих/белых фонов. Яка Дирнбека лучше, потому что он более оптимален.
В любом случае.. Решили с этим. Но как этот Jaka Dirnbek jquery используется по ссылке? Пример:
<div id="nav_virsus">
<ul>
<li><a href="#"><img src="images/pagrindinis.png" alt="Main" /></a></li>
<li><a href="#"><img src="images/forumas.png" alt="Forumas" /></a></li>
<li><a href="#"><img src="images/unban.png" alt="Atsibaninti" /></a></li>
<li><a href="#"><img src="images/banai.png" alt="Banai" /></a></li>
</ul>
</div>
CSS:
#nav_virsus {
position:absolute;
top:71px;
right:50px;
}
#nav_virsus li
{
font-family: 'Anaheim', sans-serif;
font-size:14px;
text-transform:uppercase;
float:left;
padding:20px;
}
#nav_virsus li a
{
color:#b8d9ff;
text-decoration:none;
padding:20px 5px 20px 5px;
}
#nav_virsus li a:hover
{
background:url(../images/hover.png) repeat-x;
color:#000;
text-decoration:none;
padding:21px 5px 20px 5px;
}
Мне кажется, вы поступаете неправильно. Img.b должен иметь непрозрачность 0 at: not (: hover) и непрозрачность 1 при: hover, но все, что вы делаете, устанавливает непрозрачность $ (this), которая является img.a
Вот моя переработка... Я не использовал наведение, потому что меня путают с синтаксисом
Вот моя скрипка /jsbin
HTML
<div class="fadehover">
<a href="#">
<img src="http://csrelax.lt/images/informacija.png" alt="Informacija" class="a"/>
</a>
<a href="#">
<img src="http://csrelax.lt/images/informacija_hover.png" alt="Informacija" class="b"/>
</a>
</div>
CSS
div.fadehover
{
position: relative;
}
img.a
{
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b
{
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
JS - использование jQuery
$(document).on('mouseenter', 'img.a', function() {
console.log('mouseenter');
$(this).parent().next().find('.b').animate({"opacity": "1"}, "slow");
});
$(document).on('mouseleave', 'img.a', function() {
console.log('mouseleave');
$(this).parent().next().find('.b').animate({"opacity": "0"}, "slow");
});
PS ExceptionLimeCat нашел очень приятное решение +1