• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Link Transition Effect When Hovering?

Shelley

Well-known member
#2
You could apply the transition effects to each class rather than apply a global setting which I assume your doing? The transition does have adverse effects on some areas such as navbar popupmenu hovers etc so I would apply them specifically to the areas you want.
 

DRE

Well-known member
#3
You could apply the transition effects to each class rather than apply a global setting which I assume your doing? The transition does have adverse effects on some areas such as navbar popupmenu hovers etc so I would apply them specifically to the areas you want.
I just wanted the subforum titles to do it and the message title enhancement area like in your addon does.
 

Shelley

Well-known member
#4
Not sure what you mean with the subforum titles. wouldn't applying the following in extra do it for the message titlebar?

Code:
.thread_view .titleBar h1 a:hover {
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.5;
}
 

DRE

Well-known member
#5
Not sure what you mean with the subforum titles. wouldn't applying the following in extra do it for the message titlebar?

Code:
.thread_view .titleBar h1 a:hover {
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.5;
}
YEEAAAHH like that, thank you!!!


test24.jpg
 

Shelley

Well-known member
#6
Code:
.nodeTitle a:hover {
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    opacity: 0.4;
}
 

MagnusB

Well-known member
#7
You can do the same thing with jQuery:
Code:
$(".link").hover(function(){
  $(this).animate({ opacity: '0.5'}, "slow"); // Hover effect
}, function() {
  $(this).animate({ opacity: '1'}, "slow"); // start / end 
});
You just need to change .link to the class you need to change. You can also use color, but then you need a plugin or jQuery UI.
 

DRE

Well-known member
#9
I've been using this btw

Code:
.forum_view .titleBar h1 a:hover {
    -moz-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
color: #3436CE;
}