Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.06.2021, 15:40
Sunlion Sunlion ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 39
Sunlion befindet sich auf einem aufstrebenden Ast
Standard Wie kann ich einen Hover-Effekt verzögern?

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>
Mit Zitat antworten
Sponsored Links