Bild anzeigen, wenn Maus über text
Ich bin erstellen einer einfachen Inventur-app, und habe derzeit eine Tabelle, die listet alle Artikel auf Lager. Ich möchte ein Bild von jedem Artikel angezeigt, wenn der Benutzer mit der Maus über die Beschreibung der einzelnen Artikel, aber es könnte viele verschiedene Elemente in der Liste und jeder hat seine eigene Bild. Ich testete einige code mit den Einträgen unter, aber es funktioniert nicht richtig, weil nur Bild zeigt für beide Elemente.
Wie bekomme ich ein anderes Bild anzeigen für jedes Element, habe ich in einer Liste?
HTML
<li>
<a href="#">Get Well</a>
<div class="place-image"><img src="../img/Get%20Well.jpg"></div>
</li>
<li>
<a href="#">I Love You</a>
<div class="place-image"><img src="../img/I%20Love%20You.jpg"></div>
</li>
Javascript
$('a').hover(
function() {
$('.place-image').fadeIn('slow');
},function() {
$('.place-image').fadeOut('slow');
}
);
Ich glaube, es würde zu viel verlangen, code und Bedienungsanleitung Wartung. Wie wird es?
InformationsquelleAutor Andres Quintero | 2017-03-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ist nur eine Empfehlung, es ist in der Regel besser zu verbergen, anstatt Sie zu zerstören, Browser wird es Ihnen danken.
Warum? Wenn Sie schalten Sie die Anzeige-block auf "keine" oder " none zu block, den browser hat, das zu zerstören, element und machen es wieder. Wenn Sie nur verstecken, der browser muss nur um es zu positionieren.
HTML
CSS
Sehen, es läuft https://jsfiddle.net/b5Lvq7yL/
Auf der anderen Seite, gegeben, dass Sie möchten, verwenden Sie javascript, um zu machen, besser wiederverwendbar und wartbar, schlage ich vor, Sie zu kombinieren, die Idee mit einige generische CSS und denke an ihn als etwas, was Sie wahrscheinlich wollen, um Sie später zu verwenden, die für andere Teile der software (oder andere Projekte)
In der Tat, können Sie verallgemeinern.
Können Sie ein trigger-selector ".onhover-toggle-Kind-Klasse", die Ihr Kind von "data-target" und schaltet die Klassen in der "Daten-toggle", wenn Sie die Maus betritt und verläßt..
Verwenden die gleiche HTML haben Sie, aber auch andere CSS-Klassen
Einige super-generische CSS-Dateien.
Und javascript (mit jQuery)
Oder, wenn Sie möchten, verwenden Sie vainilla javascript:
Sehen beide Beispiele arbeiten: https://jsfiddle.net/kg22ajm6/
Können Sie Klassen erstellen, verwenden Sie die Deckkraft: 0 und "Deckkraft": 1, um die "fadeIn" und "fadeOut". CSS ist normalerweise eine bessere Wahl über rohes Javascript oder jQuery, jQuery fadeIn und fadeOut manuell animieren und CSS-übergänge eingebaut, die innerhalb von Browsern.
Siehe das Beispiel mit Deckkraft-animation: https://jsfiddle.net/Lwcbn0ae/1/
Grüße,
InformationsquelleAutor cnexans
Setzen Sie das Bild versteckt, auf der ersten durch die Verwendung von css
display:none
und mit der Maus über Jquery verwenden der Maus über ein Ereignis zeigen und auf die Maus sich wieder verstecken wie:InformationsquelleAutor Mayank Pandeyz
HTML
CSS
Probieren Sie es einfach ...Sie nie, dass beide in ein und demselben element zusammen
InformationsquelleAutor Jana