Ich habe ein Bild auf meiner Webseite, das, wenn man es mit dem Cursor anvisiert, ein graues Overlay erscheinen lässt, das mit Text gefüllt werden kann. Leider löst es bereits aus, wenn ich mich in dem blauen Kasten (s. u.) mit dem Cursor befinde - wie kann ich das verhindern?
.overlay { position: absolute; top: 0; bottom: 0; left: 35; right: 0; height: 100%; width: 50%; opacity: 0; transition: .9s ease; background-color: #333;}
Durch das width: 50%; nimmt dein Overlay die Hälfte der "Webseite" ein.
width: 50%;
Entweder setzt du max-width:400px für das Overlay (wobei der Pixelwert der Bildbreite entsprechen sollte).
max-width:400px
Oder du triggerst den Mouseover nicht mit dem Overlay, sondern mit dem img darunter!
img
Du hast keinen Javascript-Code gegeben. Mit Jquery wäre das:
$('.overlay img').mouseover( function(){ // do the trigger});
Hat geklappt!
Ein anderes Problem?
Willkommen bei der Stacklounge! Stell deine Frage einfach und kostenlos