Wie kann ich einen Hover-Effekt verzögern?

Sunlion · #1 (**permalink**) 09.06.2021, 16:40

Ich habe eine Ebene mit Links. Geht man mit der Maus über einen dieser Links, öffnet sich eine zweite Ebene, die weitere Links enthält. Das klappt soweit alles ganz gut.
Nun möchte ich aber die Auslösung des Hover-Effekts etwas verzögern, um zu vermeiden, dass er ausgelöst wird, nur weil man mal zufällig mit der Maus über den Link drüberwischt. Der Hover-Effekt soll erst starten, wenn die Maus beispielsweise eine Sekunde über dem Link gestanden hat.
Wie kann ich das mit CSS umsetzen? Die von mir probierten transitions delay und was ich noch so gefunden habe, hatten leider keinen Effekt. Aber vielleicht habe ich sie auch nur an der falschen Stelle eingesetzt?
Weiß jemand Rat?

HTML-Code:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">		
		<style>
			@keyframes fade-effect {0% {transform: scale(0.0); opacity: 0;} 100% {opacity: 0.95;}}
			body {padding: 50px; background-color:#999}

			.link {text-align: center; display: inline-block; width: 76px; height: 98px; margin: 0 0 10px 0; padding: 0; border-radius: 8px;}
			.linkimage {display: inline-block; width: 64px; height: 64px; margin: 0 0 6px 0;}
			img {display: inline-block; width: 62px; height: 62px; margin: 2px 0 3px 0; box-shadow:rgba(0,0,0,0.5) 0 2px 4px;}
			img:hover {box-shadow: rgba(255,255,255,1.0) 0 1px 5px;}
			.linktext {width: auto; height: 30px; display: inline-block; vertical-align: top; font-family: sans-serif; color: #fff; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; text-shadow: rgba(0,0,0,0.7) 0 2px 2px; white-space: normal; text-overflow: ellipsis;}
			a {text-decoration: none; color: #888;}

			.link .subspalte2 {display: none; position: relative; background-color: #333; z-index: 1; padding: 20px 0 10px 0; border-radius: 8px; box-shadow: 0 50px 1000px black; border: 1px solid #bbb; width: 172px; height: auto; top: -120px; left: 0px;}
			.link:hover .subspalte2 {display: table; animation: fade-effect 0.1s ease-in; opacity: 0.95}
			}
		</style>
	</head>


	<body>		
		<div class="link">
			<a href="#" target="_blank" rel="noopener">
				<div class="linkimage">
					<img src="keinbild.jpg">
				</div>
			
				<div class="linktext">
					Ebene 1
				</div>
			</a>
			
			
			<div class="subspalte2" id="desktop">
				<div class="link">
					<a href="#" target="_blank" rel="noopener">
						<div class="linkimage">
							<img src="keinbild.jpg">
						</div>
					
						<div class="linktext">
							2. Ebene 1
						</div>
					</a>
				</div>
				
				<div class="link">
					<a href="#" target="_blank" rel="noopener">
						<div class="linkimage">
							<img src="keinbild.jpg">
						</div>
					
						<div class="linktext">
							2. Ebene 2
						</div>
					</a>
				</div>
			</div>
		</div>	
	</body>
</html>

top · #2 (**permalink**) 10.06.2021, 16:45

"transition-delay" verzögert die Reaktion bei "transition".

Du mühst dich hier mit "animation" ab. Dazu könntest du die Animationsdauer entsprechend verlängern und zwischen 0% und 100% noch eine Stufe dazwischen einfügen (z.B. 66%) welcher du auch die Angaben wie bei 0% verpasst.

Ich würde das Problem aber grundsätzlich mit transition und nicht mir animation angehen. Versuch es mal so:

Code:

/* @keyframes fade-effect {0% {transform: scale(0.0); opacity: 0;} 100% {opacity: 0.95;}} */
body {padding: 50px; background-color:#999}

.link {text-align: center; display: inline-block; width: 76px; height: 98px; margin: 0 0 10px 0; padding: 0; border-radius: 8px;}
.linkimage {display: inline-block; width: 64px; height: 64px; margin: 0 0 6px 0;}
img {display: inline-block; width: 62px; height: 62px; margin: 2px 0 3px 0; box-shadow:rgba(0,0,0,0.5) 0 2px 4px;}
img:hover {box-shadow: rgba(255,255,255,1.0) 0 1px 5px;}
.linktext {width: auto; height: 30px; display: inline-block; vertical-align: top; font-family: sans-serif; color: #fff; font-size: 12px; line-height: 15px; text-align: center; text-decoration: none; text-shadow: rgba(0,0,0,0.7) 0 2px 2px; white-space: normal; text-overflow: ellipsis;}
a {text-decoration: none; color: #888;}

.link .subspalte2 { /*display: none; */ position: relative; background-color: #333; z-index: 1; padding: 20px 0 10px 0; border-radius: 8px; box-shadow: 0 50px 1000px black; border: 1px solid #bbb; width: 172px; height: auto; top: -120px; left: 0px;

  display: table;
  transform: scale(0.01);
  opacity: 0;
  transition: all 200ms ease-out;
  pointer-events: none;
}
.link:hover .subspalte2 {
  transition-delay: 1s;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

Sunlion · #3 (**permalink**) 10.06.2021, 18:05

Hallo Top,

danke für Deine Hilfe!
Da ist jetzt zwar eine Verzögerung drin, aber der Einblendeffekt ist verschwunden. Dafür ist nun ein Ausblendeffekt vorhanden, der vorher nicht da war, aber durchaus erwünscht ist. Kriegst Du das auch noch zusätzlich mit Einblendeffekt hin?

top · #4 (**permalink**) 11.06.2021, 11:05

Ich hatte es nicht unter Firefox getestet. Mit Chrome ging es.

FF scheint in dem Fall ein Problem mit der Ausgangswert "opacity: 0;" zu haben. Setzt man den Grundzustand auf "opacity: 0.01;", funktioniert es auch im Firefox:

https://jsfiddle.net/fwmvpn1j/

Sunlion · #5 (**permalink**) 11.06.2021, 11:09

Zitat:

Zitat von top

https://jsfiddle.net/fwmvpn1j/

Ja, genau so, Wahnsinn! Vielen Dank, Du hast mir sehr geholfen!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 20:51
Problem mit CSS Menü	SMundt	CSS	9	07.01.2009 20:12
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 13:04
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 18:25
CSS Einsteiger bittet um Hilfe	pcklinik	CSS	0	06.09.2007 15:40