Wechseln zu:Navigation, Suche
Wiki
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 9: Zeile 9:
| {{ 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
|}
|}
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>
}}

Version vom 23. Januar 2020, 14:22 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
  Infotext für Interessierte

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;
}