помочь с исчезновением при наведении мыши - PullRequest
Новая
       8

помочь с исчезновением при наведении мыши

0 голосов
/ 08 августа 2011

Как сделать так, чтобы страница приветствия на моих сайтах поблекла до того, как вы наведете на нее курсор мыши, но после этого она станет более заметной? это страница Tumblr, так что я думаю, что это должен быть HTML.

любая помощь по этому поводу? спасибо

http://realhighlife.tk/

так как рассматриваемая картинка также является кликабельной ссылкой, возможно ли это сделать? 

<center><a href="http://therealhighlife.tumblr.com/"><img src="http://i52.tinypic.com/29p40eo.jpg"></a></center>

Ответы [ 2 ]

0 голосов
/ 08 августа 2011

@ ilia-choly прав, но если вы хотите, чтобы он работал и в некоторых старых браузерах, вы можете попробовать jQuery, а именно: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
/* Config */    
    targetElement = 'center a'; /* Select the element(s) you want to fade in and out */
    fadedOpacity = .3; /* The opacity value you like for your faded state */
    animDuration = 250; /* The duration in ms for the fade animations, smaller is faster */

/* This block runs once the document loads to bind the plugin behaviour to your target */
$(function(){
    $(targetElement).fadeInOnHover(fadedOpacity, animDuration);
    // ... You can bind the behaviour to other elements here if you need to, e.g:
    // $('div.new-target').fadeInOnHover(fadedOpacity, animDuration);
});

/* This small jQuery plugin behaviour can be applied to any element */
$.fn.fadeInOnHover = function(fadedOpacity, animDuration) {
    $(targetElement)
        .fadeTo(0, fadedOpacity)
        .bind('mouseover',function(){
            $(this).fadeTo(animDuration, 1);
        })
        .bind('mouseout',function(){
            $(this).fadeTo(animDuration, fadedOpacity);
        })
    ;
};
</script>
0 голосов
/ 08 августа 2011

посмотрите на переходы css3.http://www.cardeo.ca/2010/creating-a-fading-link-transition-with-css3

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

html 

<img id="test" src="http://static.adzerk.net/Advertisers/2333.jpg" />

css 

#test {  
    opacity: 0.5;
    -webkit-transition-property: opacity, 
    background;  -webkit-transition-duration: 1s, 1s;  -webkit-transition-timing-function: linear, ease-in; }  

#test:hover {  
    opacity: 1.0;
}

fiddle: http://jsfiddle.net/SW5CV/

...