wie kann man mit html ein hover verzögern?

... komplette Frage anzeigen

3 Antworten

Gutefragestandartantwort -> das geht nicht mit html, sondern mit Javascript ;).

Was du meinst sind die Default Browser Tooltips. Die deaktivierst du (salop gesagt) und nimmst Javascript Tooltips. Wenn du Bootstrap benutzt hast du sowas per Default dabei (siehe Doku). Oder du bindest Jquery ein: 

https://jqueryui.com/tooltip/

Vorteil: 

  1. Die Default Tooltips bleiben bestehen (für die Clients, die kein Javascript anhaben)
  2. Du kannst die "neuen" Tooltips stylen und an deine Webseite anpassen
  3. Du kannst das delay (Verzögerung) bestimmen

Eine andere Möglichkeit gibts leider nicht, außer über Javascript. An die Defaulteinstellung der Browser kommste in dem Fall nicht an.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
08.02.2016, 21:48

Eine andere Möglichkeit gibts leider nicht, außer über Javascript.

Nö, Tooltips können auch mit reinem CSS umgesetzt werden. Dank CSS3 sind auch gewünschte Verzögerung ohne weiteres möglich. Tooltips mit JavaScript wäre die Oldschool-Variante. ;-)


1

Bei den von dir angesprochenen Informationen, handelt es sich um so genannte Tooltips. Dessen Inhalt steht innerhalb eines title-Tags. Um Toolstips individuell zu gestalten, benötigst du wahlweise JavaScript oder CSS3. Wenn du Google nach "Pure CSS Tooltip" oder "JavaScript (jQuery) Tooltip" suchen lässt, bekommst du haufenweise Beispiele, Snippets und Tutorials dazu angezeigt. Also einfach mit diesen Schlagworten die Suchmaske füttern. ;-)

Lg medmonk 

Antwort bewerten Vielen Dank für Deine Bewertung

Hallo Martengame,

auf den Title-Tag eines Links hast Du mit CSS wenig Einfluss.

Du kannst aber z.B. einen beliebigen Text in einen <span> setzen,

dem gibst Du eine CSS-classe, z.B. meinhover und setzt den span auf dispaly:none; position:relativ;  und Werte für die Position

innerhalb Deines Links.

jetzt verpasst du dem span bei einem hover 

   display:block

und mit transition in der CSS-Anweisung kannst Du jetzt das ganze mit zetlicher Verzögerung einblenden.

z.B.:

.meinhover{

display: none;
position: relative;
top: -52px;
left: -271px;
border: 2px solid #C0C0C0;
background-color: #FFF;
border-radius: 5px;
color: #000;
width: 270px;
}

.meinhover:hover{

    dispaly:block

    transition: background-color .5s;

}

mit transition und der position musst Du Dich mal ein wenig beschäftigen

und mit dem ganzen einw enig herum experimetntieren. das kann ganz spannend sein.

Antwort bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?