首页 文章

jquery图像悬停过渡/淡入淡出?

提问于
浏览
-1

我不太确定如何调用效果,因为我不明白你说javascript或jquery时的区别 . 我做不了什么 .

所以,我在html / css中制作一个菜单,我希望在悬停菜单项时产生淡入淡出效果 . 我不确定这样的事情是否存在,但我发现了一些例子,但不完全是我需要的 .

http://greg-j.com/static-content/hover-fade.html

http://www.jacklmoore.com/blend

在这两件事中都有我想要的效果,但有正常和悬停部分的项目/按钮 .

我所拥有的只是悬停状态:)所以它基本上是一个图像作为菜单的背景和其他图像的悬停状态 .

有没有机会只使用一个用于(悬停)的图像来显示“出现/消失”淡入淡出效果,或者必须有正常和悬停状态才能使其正常工作?

1 回答

  • 2

    看看CSS3过渡 .

    这是一些用于淡化悬停元素的CSS .

    .fade 
    {
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }
    
    .fade:hover 
    {
        opacity: 0.5;
    }
    

    你只需要为你的元素提供如下的.fade类:

    <p class="fade">This is my text element that will fade when you hover over it.</p>
    

    虽然它不一定是文本 - 它可以是按钮,图像等 .

    取自http://bavotasan.com/2011/a-simple-fade-with-css3/

相关问题