Link Transition Effect When Hovering?

DRE

Well-known member
I've been up all night trying to get this to work but to of no avail. Sometimes it works but when it does other stuff screws up. Basically just trying to get links to highlight in slo-motion like so: http://themejunkies.net/forums/
 

Shelley

Well-known member
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
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
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
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
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
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
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;
}
 
Top