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
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
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.
Hier ist ein ziemlich gutes jQuery-Beispiel und Code:
http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/
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;
}
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;
}