Question

如何让我的网站欢迎页面在你鼠标悬停之前被淡化，但是一旦你这样做会变得更加明显？这是一个tumblr页面所以我认为它必须是html。

对此有何帮助？感谢

因为有问题的图片也是可点击的链接，是否可以这样做？

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

Answer 1

了解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;
}

小提琴：http://jsfiddle.net/SW5CV/

Answer 2

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

帮助淡出鼠标

2 个答案: