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

Question

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

0

Я пробовал много разных методов, но не работал. Что случилось с моим кодом? Пожалуйста, объясните... помощь. Мои оба изображения прозрачны, и моя идея о наведении курсора мыши затухает новым образом. Текущий код:

DEMO DEMO2

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

Linciokas 25 апр. 2014, в 19:09

Источник

0

Я бы порекомендовал использовать fadeTo здесь api.jquery.com/fadeTo
sofl 25 апр. 2014, в 16:49

Теги:

jquery

css

fade

onmouseover

rollover

3 ответа

Ещё вопросы

Я бы порекомендовал использовать fadeTo здесь api.jquery.com/fadeTo

ExceptionLimeCat · Answer 1 · 2014-04-25T15-12-00.000Z

Я считаю, что для достижения желаемого эффекта, насколько я понимаю, вам просто нужно добавить фон для img.a скрипка

   img.a{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background:#fff;
  }

Извините, скрипка была сломана. только что обновил ссылку.

Linciokas · Answer 2 · 2014-04-30T10-28-00.000Z

Решения 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;
}

Jaka Dirnbek · Answer 3 · 2014-04-25T15-55-00.000Z

Мне кажется, вы поступаете неправильно. 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

Пожалуйста, включите соответствующие части вашего кода, а также. Таким образом, если jsbin не работает, будущий посетитель все равно сможет увидеть, какой метод вы использовали для решения проблемы.