web-dev-qa-db-fra.com

Comment faire briller une image ou un bouton lorsque vous passez la souris sur l'utilisation de javascript ou de jquery?

Je souhaite ajouter un effet lumineux lorsque je passe la souris sur un bouton ou une image. Comment puis-je faire cela avec javascript, jquery ou CSS? Voici un exemple de ce que je veux regarder http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

Quelqu'un peut-il me donner un exemple de code?

Merci d'avance

javascriptjqueryhtmlcsseffect
8
user701510

Si le fait de cibler des navigateurs modernes ne vous dérange pas, vous pouvez utiliser les transitions CSS et les propriétés box-shadow, aucun JS n’est nécessaire.

Découvrez ce site ici:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Faites défiler la liste jusqu'à ce que vous voyiez Fondu à l’intérieur et Reflect)

Démo ici: http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

11
JordanC

Jamais un mauvais moment pour poster Radioactive Buttons , qui est pur CSS3. Seuls les navigateurs Webkit (par exemple, Chrome et Safari). Voici une version modifiée qui brille en survol, ce qui est beaucoup moins distrayant:

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow: 0 0 0 #333; }
  to { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
}

a.green.button {
  background-color: #749a02;
  border-radius: 0.5em;
  color: #fff;
  padding: 0.5em;
  text-decoration: none;
}

a.green.button:hover {
  background-color: #91bd09;
  -webkit-animation-name: greenPulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-box-shadow: 0 0 18px #91bd09;
}

<a href="#" class="green button">Click Me</a>

jsFiddle demo . Cela devrait faciliter les choses à mesure que de plus en plus de navigateurs l'adoptent, mais jusque-là, il ne s'agit que d'un ajout aux solutions JavaScript.

7
brymck

Voici un très bon exemple et code jQuery:

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

4
Colin

En utilisant CSS, vous pouvez également obtenir les mêmes résultats:

HTML

 <img class="opacity_img" src="image.png" alt="" />

CSSpourIE:

 .opacity_img{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=45)"; 
  filter:alpha(opacity=45);
 }
 .opacity_img:hover{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter:alpha(opacity=100);
 }

CSSpour les autres navigateurs:

 .opacity_img{
  opacity: 0.45;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
 }
3
liza

liza a donné une excellente réponse: l'effet obtenu en quelques lignes de code seulement.

Mais si vous le souhaitez plus lisse, vous pouvez faire en sorte que la transition d’opacité dure en ajoutant:

 .opacity_img{
  opacity: 0.45;
  transition: opacity 0.5s;
 }
 .opacity_img:hover{
  cursor:pointer;
  opacity: 1.0;
  transition: opacity 0.5s;
 }
0
asdfgh