zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie kann ich einen Hover-Effekt verzögern?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.06.2021, 15:40
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
  #2 (permalink)  
Alt 10.06.2021, 15:45
top top ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 18
top wird schon bald berühmt werden
Standard

"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;
}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.06.2021, 17:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 39
Sunlion befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #4 (permalink)  
Alt 11.06.2021, 10:05
top top ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 06.01.2021
Beiträge: 18
top wird schon bald berühmt werden
Standard

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/
Mit Zitat antworten
  #5 (permalink)  
Alt 11.06.2021, 10:09
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2009
Beiträge: 39
Sunlion befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von top Beitrag anzeigen
https://jsfiddle.net/fwmvpn1j/
Ja, genau so, Wahnsinn! Vielen Dank, Du hast mir sehr geholfen!
Mit Zitat antworten
Antwort

Stichwörter
hover, verzögerung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:41 Uhr.