Переход от фонового изображения к зависанию - PullRequest
Новая
       4

Переход от фонового изображения к зависанию

0 голосов
/ 22 сентября 2010

Я хотел бы преобразовать мое первое фоновое изображение в изображение, которое должно использоваться при наведении, а затем снова выключено, как только пользователь уберет свою мышь. Можно использовать jQuery.

Вот что у меня есть: 

    <ul style="top: -70px; display: block; padding-left: 205px;" id="cats-menu" class="nav superfish sf-js-enabled">
    <a href="http://www.ballpointtech.com/category/guides/"></a><li id="li_guides" onclick="window.location = 'http://www.ballpointtech.com/category/guides/';"><a href="http://www.ballpointtech.com/category/guides/"> </a></li>

    <a href="http://www.ballpointtech.com/category/news/"></a><li id="li_news" onclick="window.location = 'http://www.ballpointtech.com/category/news/';"><a href="http://www.ballpointtech.com/category/news/"> </a></li>
    <a href="http://www.ballpointtech.com/category/reviews/"></a><li id="li_reviews" onclick="window.location = 'http://www.ballpointtech.com/category/reviews/';"><a href="http://www.ballpointtech.com/category/reviews/"> </a></li>
    <a href="http://www.ballpointtech.com/category/tipstricks/"></a><li id="li_tipstricks" onclick="window.location = 'http://www.ballpointtech.com/category/tipstricks/';"><a href="http://www.ballpointtech.com/category/tipstricks/"> </a></li>
</ul>

    <style type="text/css">
    #li_guides {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Still1.png');
        width:130px;
        height:92px;    
}
    #li_guides:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Rollover1.png');
    }
#li_guides:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Guides-Click2.png');
    }
#li_reviews {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Still.png');
        width:130px;
        height:92px;    
}
    #li_reviews:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Rollover.png');
    }
#li_reviews:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/Reviews-Click.png');
    }
#li_news {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Still.png');
        width:130px;
        height:92px;    
}
    #li_news:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Rollover.png');
    }
#li_news:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/News-Click.png');
    }
#li_tipstricks {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-still.png');
        width:130px;
        height:92px;    
}
    #li_tipstricks:hover {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-rollover.png');
        }
    #li_tipstricks:active {
        background-image:url('http://www.ballpointtech.com/wp-content/uploads/2010/09/tipstricks-click.png');
    }
</style>

Argh, не могу правильно отформатировать ...

Ответы [ 2 ]

1 голос
/ 22 сентября 2010

Вот хорошее начало, которое я собрал в jsbin . Я подключил только значок новостей в качестве демонстрации. Это не пуленепробиваемый, поскольку оставление элемента до завершения перехода оставит элемент в неправильном состоянии, но я не знаю, как с этим справиться. В jquery могут быть методы лучше, чем fadeOut/fadeIn для этой работы. Также вы захотите сделать :active фон ! important, чтобы изображение всегда было видно при нажатии, что я забыл сделать перед сохранением.

также вы не можете иметь элементы <a>, висящие вокруг элементов <li>. сделайте ссылки display:block, чтобы они занимали пустое место внутри элемента списка, и тогда вы можете отбросить хаки onclick="window.location...".

0 голосов
/ 22 сентября 2010

@ hunter

это игнорирует желание исчезнуть. 

$('your.item').mouseenter(function(){
     $('your.item').stop().animate({opacity: 0},200,function(){

          $('your.item').attr('src','/new/image.jpg');
          $('your.item').stop().animate({opacity: 1},200);
    }
    });




  });

это более или менее дает общую картину.не проверено или не проверено.если вы сделаете это и поместите его в jfiddle, я помогу вам через это.вам также нужно сделать .mouseleave() функцию

...