wie funktioniert der css - "onmouseover" - event arbeiten?
update-
sorry Leute, ich sollte einen link bereitgestellt haben, um die website, wo ich sah den Effekt. hier gehen Sie - http://www.w3schools.com/Css/css_image_transparency.asp
und den code, den ich gesehen habe (und die basis dieser Frage) ist wie folgt -
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Die ursprüngliche Frage ist wie unten -
Ich war auf der Suche für rollover-Effekte, die getan werden kann, ohne Verwendung von JS, und ich stolperte über die w3schools-website Lehre die "Deckkraft" - Einstellung für die Bilder. In dem code, es gibt keine js beteiligt, nur seine Reine css-Dateien.
ich habe sogar versucht, mit dem gleichen code in meiner Webseite (die keine js, noch), und ich bemerkte, dass der code, der passiert, um perfekt funktionieren in chrome und IE 7.0. der code hat einen "onmouseover" - event und ein weiteres "onmouseout" - Ereignis zu geben, die hover-Effekte auf der Grundlage der opacity-Einstellungen.
sich Fragen, ob diese Effekte (onmouseover und onmouseout) -
1. Reine css-Dateien
2. standards compliant (xhtml 1+ und css2)
3. ob es irgendwelche hacks beteiligt
ich kann immer noch nicht glauben, dass diese Dinge funktionieren auf ie7, und Frage mich, warum gibt es keine Dokumentation über diese Ereignisse.
InformationsquelleAutor arun nair | 2011-05-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es kein "onmouseover" - event oder Attribut in CSS, das JavaScript. CSS verwendet den ":hover" pseudo-Klasse für die Maus über die Ereignisse. Ein kurzes Beispiel,
HTML:
CSS:
In diesem Beispiel, wenn Sie den Mauszeiger über die
#someid
element, der hintergrund wechselt von weiß zu schwarz.Dies ist der richtige Umgang mit Maus über die Ereignisse in CSS. Es ist standards konform und funktioniert in allen modernen Browsern (und einigen älteren Browsern auch).
Nebenbei: Es funktioniert nicht immer im IE6, IE6 erkennt nur den ":hover" pseudo-Klasse, wenn es angewendet wird, um Anker-tags ("a:hover", etc).
Basierend auf der update auf Ihre Frage:
Verwenden JavaScript, um den Stil zu ändern. Die nur wenig von dem, was CSS ist die
style='...'
Teil. Der text inonmouseover
undonmouseout
ist JavaScript.Tun, was Sie wollen in reinem CSS, es sollte so sein,
opacity
ist CSS3 und nur unterstützt durch moderne Browser (IE6,7,8 nicht unterstützt). Sie könnenfilter:...
zu bekommen "Deckkraft" im IE funktioniert (obwohl es nicht behandeln PNGs korrekt, aber da bist du mit JPG-das ist nicht ein Problem), aber dann ist dein code ist technisch nicht standards-konform als "filter
" ist nicht in der CSS-standard. Das spielt generell keine Rolle, viel, da es immer noch richtig machen in jedem modernen browser.Danke, Rich. Das war genau das, was ich suchte. Eine Letzte Frage - Sie haben erwähnt, dass die onmouseover-und onmouseout javascript-Ereignisse und nicht mit css überhaupt. auch habe ich versucht, dieses Stück code auf meiner Webseite, die nicht über javascript irgendwo erwähnt (keine script-tags). in diesem Fall hat der browser (ie7) automatisch erkennen es als javascript-code?
Ja, der browser onmouseover/out als JavaScript-event-tags und automatisch wissen, den code, der in JavaScript. Sie benötigen nicht unbedingt einen script-tag auf der Seite für JavaScript, dort zu sein. Testen Sie dies durch die Deaktivierung von JavaScript in Ihrem browser und dann sehen, dass der hover-Effekt funktioniert nicht mehr.
danke, rich. das hat geholfen.
InformationsquelleAutor Rich Adams
Ich nehme an, Sie sprechen über die :hover-Ereignis?
Stil:
Visual Beispiel: http://jsfiddle.net/zRnug/
Alle hover-Effekte, die Sie hinzufügen möchten zu Ihrem stylesheet innerhalb der # - Selektor
:hover
{ } - Bereich.Alle Effekte, die Sie wollen, beziehen sich vor (der Standard-style des Elements), nur die Verwendung in der #Selektor { } - Bereich.
InformationsquelleAutor Atticus
Diese sind Javascript-inline-event-Handler.
Können Sie dies tun, in reinem CSS mit der
:hover
selector.InformationsquelleAutor SLaks
CSS unterstützt die
:hover
Selektor, der ausgelöst wird, wenn man mit der Maus über das Element.Jede CSS-Eigenschaft kann festgelegt werden, zu ändern, die auf mouse-over über die
:hover
Selektor auf diese Weise.Opazität ist ein CSS3-feature. Es wird von den meisten Browsern unterstützt, aber IE8 und niedriger nicht unterstützt. Sie haben eine alternative Möglichkeit, es zu tun (mit dem IE-spezifischen
filter
Eigentum); es ist eher fummelig als die standard-CSS und schwieriger zu bekommen Recht, aber es kann getan werden.Sich bewusst sein, dass IE6 und niedriger unterstützt nur
:hover
auf<a>
Elemente. Andere Browser (einschließlich IE7 und aufwärts) - Unterstützung für alle Elemente. Mein Rat wäre, nur nicht um die Unterstützung von IE6 auf Ihrer Website, aber wenn Sie tun müssen, es gibt hacks dafür, die machen:hover
richtig funktionieren.InformationsquelleAutor Spudley