Using jQuery fadeIn Effect Plugin on :hover for links

Question

I am creating links in which their background change on mouse hover it's easy to make this with CSS but I want a fade-out effect for the original background showing the hover one slowly. I want to use a jQuery Plugin to make this fade (in/out) effect apply to links having certain classes.

All I want is that to make the .CLASS:hover fade in when hovering or .CLASS to fade out showing .CLASS:hover slowly... without changing to different classes in which one for the original background and the other for the hovering one.

You don't need jquery for this; use CSS transitions: .MyClass{ transition: background 0.5 ease;} — frenchie, Sep 20 '13 at 12:18
answer for this http://stackoverflow.com/questions/16004905/jquery-hovers-dont-work-in-ie10-but-works-in-lower-ie-versions — coder, Sep 20 '13 at 12:36
@user2217482: IE10 supports CSS transitions just fine; not sure what you mean. — frenchie, Sep 20 '13 at 12:50

score 1 · Accepted Answer · answered Sep 20 '13 at 12:38

You can do it with CSS3-Transitions. Support is great (all modern browsers, even IE)

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

Pure CSS:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}

#foo:hover {background:yellow}

score 0 · Answer 2 · answered Sep 20 '13 at 12:37

0

You can do this with css3

.CLASS{
    background: <put the color here>;
    transition: background 0.5 ease;
}
.CLASS:hover{
    background: <put the other color here>;
}

answered Sep 20 '13 at 12:37

anacarolinats

667
8
19

Using jQuery fadeIn Effect Plugin on :hover for links

2 Answers2