Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you make an image or button glow when you mouse over using javascript or jquery?

I want to add a glowing effect when I mouse over a button or image. How do I do this with javascript, jquery, or CSS? Here is an example of what I want it to look http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

Can someone give me some sample code?

Thanks in advance

like image 758
user701510 Avatar asked Jun 04 '11 00:06

user701510


People also ask

How do you hover in Javascript?

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements. This method triggers both the mouseenter and mouseleave events. Note: If only one function is specified, it will be run for both the mouseenter and mouseleave events.

How do you add glow to hover?

In order to have this glow animation only when user hovers over the button, we are using the CSS selector :hover . If you need to have a permanent glow effect on the button, all you need to do is to remove this :hover selection from the glow-button definition.


1 Answers

If you dont mind targeting modern browsers you can use CSS transitions and box-shadow properties, no JS needed.

Check out this site here:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Scroll down until you see Fade-in and Reflect)

Demo here: http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

like image 137
JordanC Avatar answered Oct 06 '22 01:10

JordanC