(Die Seite wurde neu angelegt: „<templatestyles src="Vorlage:Styles.css" /> <p>Erzeugt eine Hover-Blase mit einem Text, wenn man mit der Maus über das gepunktete {{spc|io|o|-}} fährt. </p>…“) |
KKeine Bearbeitungszusammenfassung |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 7: | Zeile 7: | ||
| style="line-height: 3em;" | {{ Info | Infotext für Interessierte }} || mouse-over || <span style="padding: 10px; background: rgba(0,0,0,0.81); border-radius: 3px; color: white; font-size: 95%;">Infotext für Interessierte</span> | | style="line-height: 3em;" | {{ Info | Infotext für Interessierte }} || mouse-over || <span style="padding: 10px; background: rgba(0,0,0,0.81); border-radius: 3px; color: white; font-size: 95%;">Infotext für Interessierte</span> | ||
|- | |- | ||
| {{ Info | Infotext für Interessierte }} || touch || {{ Info | Infotext für Interessierte }} Infotext für Interessierte | | {{ Info | Infotext für Interessierte }} || touch || {{ Info | Infotext für Interessierte }}Infotext für Interessierte | ||
|} | |} | ||
{| class="sptable" | |||
|- | |||
! Parameter !! Darstellung | |||
|- | |||
| |'''|class=''' || css Klasse für das verwendete Icon | |||
|} | |||
In der Mobilansicht wird das Info-Icon zusätzlich verändert: i> bzw. i< | |||
{{code| .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-collapsed::before {<br> | |||
content: '\f129\f105';<br> | |||
font-family: 'Font Awesome 5 Pro';<br> | |||
font-weight: 300;<br> | |||
color: #ec971f;<br> | |||
border-bottom: 1px dotted #ec971f;<br> | |||
border-radius: 0px;<br> | |||
padding-bottom: 1px;<br> | |||
}<br> | |||
}}<br> | |||
und | |||
{{code| .mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded::before {<br> | |||
content: '\f129\f104';<br> | |||
font-family: 'Font Awesome 5 Pro';<br> | |||
font-weight: 300;<br> | |||
color: #ec971f;<br> | |||
border-bottom: 1px dotted #ec971f;<br> | |||
border-radius: 0px;<br> | |||
padding-bottom: 1px;<br> | |||
}<br> | |||
}} | |||
Aktuelle Version vom 15. Februar 2021, 18:00 Uhr
Erzeugt eine Hover-Blase mit einem Text, wenn man mit der Maus über das gepunktete fährt.
Zusätzlich wird der Hover-Text bei Klick/touch nach rechts expandiert, um eine Anzeige auf Mobilgeräten zu ermöglichen.
| Default-Darstellung | Aktion | Darstellung nach Aktion |
|---|---|---|
Infotext für Interessierte |
mouse-over | Infotext für Interessierte |
Infotext für Interessierte |
touch | Infotext für Interessierte |
| Parameter | Darstellung |
|---|---|
| |class= | css Klasse für das verwendete Icon |
In der Mobilansicht wird das Info-Icon zusätzlich verändert: i> bzw. i<
.mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-collapsed::before {
content: '\f129\f105';
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
color: #ec971f;
border-bottom: 1px dotted #ec971f;
border-radius: 0px;
padding-bottom: 1px;
}
und
.mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded::before {
content: '\f129\f104';
font-family: 'Font Awesome 5 Pro';
font-weight: 300;
color: #ec971f;
border-bottom: 1px dotted #ec971f;
border-radius: 0px;
padding-bottom: 1px;
}