Interaktivitäts-Strategie 1: CSS-Pseudo-Klassen / CAS Datenvisualisierung

# Interaktivitäts-Strategie 1: CSS-Pseudo-Klassen

<style>

#hover-element {

color: black;

}

#hover-element:hover {

color: blue;

}

</style>

<div id="hover-element">Dieser Text wird blau, wenn der Mauszeiger darauf zeigt</div>

<style>

ul.odd-elements li:nth-child(odd) {

background-color: #eee;

}

ul.every-third li:nth-child(3n) {

background-color: #ccc;

}

ul.just-the-third li:nth-child(3) {

background-color: #f915bb;

color: #fff

}

</style>

<li>Lorem ipsum dolor sit amet.</li>

</ul>

<li>Lorem ipsum dolor sit amet.</li>

</ul>

<li>Lorem ipsum dolor sit amet.</li>

</ul>

<style>

ul.odd-hover:hover li:nth-child(odd) {

background-color: lime;

color: white

}

</style>

<li>Lorem ipsum dolor sit amet.</li>

</ul>

<style>

.secret-message {

opacity: 0;

}

.secret-message:hover {

opacity: 1;

}

</style>

<p class="secret-message">Eine Nachricht in Geheimtinte!</p>

<div class="tooltip">The answer to everything</div>

</div>

<style>

#container {

position: relative;

font-family: system-ui;

display: inline-block;

}

.value {

font-size: 5rem;

font-weight: 200;

line-height: 1em;

}

.tooltip {

background: #dfdfdf;

border-radius: 0.5ch;

line-height: 1em;

padding: 1.2ch;

position: absolute;

top: 50%;

left: 100%;

transform: translate(1em, -50%);

display: none;

width: 10ch;

}

.tooltip::before {

content: '';

display: block;

height: 1em;

width: 1em;

position: absolute;

background: #dfdfdf;

top: 50%;

left: 0;

transform: translate(-0.5em, -50%) rotate(45deg);

}

#container:hover .tooltip {

display: block;

}

</style>

Purpose-built for displays of data