web-dev-qa-db-de.com

Wie können Sie ein Bild oder eine Schaltfläche zum Leuchten bringen, wenn Sie mit der Maus über JavaScript oder eine Abfrage fahren?

Ich möchte einen leuchtenden Effekt hinzufügen, wenn ich mit der Maus über eine Schaltfläche oder ein Bild fahre. Wie mache ich das mit Javascript, jquery oder CSS? Hier ist ein Beispiel, wie es aussehen soll http://www.flashuser.net/flash-menus/tutorial-flash-glow-buttons-menu.html

Kann mir jemand einen Beispielcode geben?

Danke im Voraus

javascriptjqueryhtmlcsseffect
8
user701510

Wenn Sie kein Interesse an modernen Browsern haben, können Sie CSS-Übergänge und Box-Shadow-Eigenschaften verwenden. Es ist kein JS erforderlich.

Schauen Sie sich diese Seite hier an:
http://designshack.co.uk/articles/css/5-cool-css-hover-effects-you-can-copy-and-paste
(Scrollen Sie nach unten, bis Sie Einblenden und Spiegeln sehen.)

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

11
JordanC

Es ist nie eine schlechte Zeit, um Radioactive Buttons zu posten, was reines CSS3 ist. Allerdings nur Webkit-Browser (z. B. Chrome und Safari). Hier ist eine modifizierte Version, die beim Schweben nur leuchtet, was weniger ablenkt:

@-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 . Es sollte einfacher werden, je mehr Browser es verwenden, aber bis dahin handelt es sich lediglich um ein Add-On zu den JavaScript-basierten Lösungen.

7
brymck

Hier ist ein ziemlich gutes jQuery-Beispiel und Code:

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

4
Colin

Mit CSS können Sie auch dasselbe erreichen:

HTML

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

CSSfürDH:

 .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);
 }

CSSfür andere Browser:

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

liza gab eine großartige Antwort - der Effekt wurde nur in wenigen Codezeilen erzielt.

Wenn Sie es glatter machen möchten, können Sie den Deckkraftübergang einige Zeit dauern, indem Sie Folgendes hinzufügen:

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