jQuery的图像悬停过渡/淡入淡出? [英] jquery image hover transition/fade?

问题描述

我不太确定如何调用效果，因为当您说javascript或jquery时我不了解它们的区别.我什么都做不了.

I'm not quite sure how to call the effect as I don't understand the difference when you say javascript or jquery. I canno't make anything.

因此，我正在用html/css制作菜单，并且希望在悬停菜单项时产生淡入淡出的效果.我不确定是否存在这种情况，但是我找到了一些类似的例子，但并不是我真正需要的.

So, I am making an menu in html/css and I want to make an fade effect when hovering menu item. I am not sure if such a thing exists, but I've found a few examples that are sort of it, but not exactly what I need.

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

http://www.jacklmoore.com/blend

两方面都具有我想要的效果，但是有些项目/按钮具有普通和悬停部分.

In both things there is the effect that I want but there are items/buttons with normal and hover part.

我只有悬停状态:) 因此，它基本上是作为菜单背景的图像以及用于悬停状态的其他图像.

What I have is only hover state :) So it is basically an image as background of menu and other image for hovering state.

是否有机会仅使用一张用于(悬停)的图像来使这种出现/消失"淡入淡出效果，还是必须具有正常的悬停状态才能使其起作用?

Is there any chance to make this "appear/disappear" fade effect with just one image used for (hovering) or there must be normal and hover state to make it work?

推荐答案

查看CSS3过渡.

这里有一些CSS可以将鼠标悬停在元素上.

Here is some CSS to fade an element on hover.

.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类，如下所示:

You just have to give your element the .fade class like this:

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

尽管不必是文本-可以是按钮，图像等.

Although it does not have to be text - it can be a button, an image, etc.

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

这篇关于jQuery的图像悬停过渡/淡入淡出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！