wie kann man mit html ein hover verzögern?

Hi Leute,

folgendes Problem. Wenn man auf meiner Seite über einen bestimmten text geht, dann erscheint sozusagen ein popup-fenster mit mehr informationen. Aber nun möchte ich da dieses Fenster nicht direkt erscheint, sondern wenn man 2 oder mehr Sekunden auf dem text mit dem Mauszeiger bleibt. Wie kann man so etwas Programmieren.

Mit freundlichen Grüßen

Marten

Answer 1

[Homero]

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.

Answer 2

[tWeuster]

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.

Comments

[medmonk]

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. ;-)

[tWeuster]

@medmonk

Ja sicherlich. Ich bin da aber recht faul. Ich schreib mein title Attribut und lass da lieber JS drüber laufen, als dass ich den Tooltip selbst ins html reinhänge. Vor allem ist das ja so schön praktisch, wenn man fertige Libs wie Bootstrap (bei denen der Tooltip im übrigen im JS bereich steht - soviel zum Thema oldschool) verwendet.

[medmonk]

@tWeuster

Das es auch mit purem CSS geht, wollte ich nur der Richtigkeit halber ergänzend erwähnt haben. Was jetzt solch schwere Libs wie Bootstrap angeht, hält sich meine Begeisterung in Grenzen. Gulp und Precompressor (Jade, Sass + Bourbon und/oder Compass) vorziehe. Übersichtlicher Quellcode, "DRYer", schlankes Markup und mein Workflow ist um Längen schneller. 

  

Answer 3

[medmonk]

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