Beispiel:HTML mark-Element.html
Aus SELFHTML-Wiki
<!doctype HTML> <html>
<head>
<meta charset="utf-8">
<title>Beispiel zur Verwendung des mark-Elementes</title>
<style>
#testfeld {
width: 30em;
height: 20em;
padding: 1em;
border: thin solid;
background-color: #8FBCFF;
}
#testfeld div {
height: 20em;
overflow: hidden;
}
button {
margin: 1em 0;
}
button:not(:hover) + #testfeld mark {
background-color: transparent;
color: inherit;
}
kbd {
background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0; border: thin solid #aaa; border-radius: 2px; box-shadow: 1px 2px 2px #ddd; font-family: inherit; font-size: 0.9em; padding: 0 0.5em;
}
</style> </head> <body>
Ein Konzentrationstest
Markiere mit gedrückter Strg-Taste alle Buchstaben b!
<button>Führe die Maus über diesen Button, um die Lösung anzuzeigen.</button>
d d p d p p d p p p d d p d d d b p p d d p d d p p p p p d p p d p d d d d d d p p d p d p d d d d d p d d p p d d d d p d p d p p p d p p d d p p d d p p p d d p p d d p p p p p d p d p d p p d p d p d d d p d p p p p d d p d p d p d p p d d d d d d p p d d d p d p d p p p p d d p p d d d p d d p d p d d p d p p p d p p d d p d d p d d d d p p d p p p p d p p p p d p p p d d p d p p p d p p p p p d d p d d p d p d p d p p b p p p d d d p p p p p d p p d d d p d d b d d p d p d d d d p p p p p p d d p p p p p d d p d d p d p d d d p d p p d p p p d p d p p p p p p d d d d p d p d p p p d d d p d p d d d d p p p d p p d d d p d p p d d d d p d d p p p d d d p d p d d d p p d d d p p p p d d d d p d d d d p d d d p d p p p d p d d d p p d d d p p p p p d p d p p d p d p p d p p d p d p d p p p d d p d d d d p p p p d d p p d d p p d p d d d p p d d d d d p p p d d d p d d d d d d d p p p d d d p p p p d d d p d d d d d p p p d d d d d p d d d b d d b p p p d d p p d p p p p d d p p d d d d p d p p d d p d d p d d d d p p d p d d d d p p p p p d p d p d p p p d d p p p d d p d p d p d p p d p d d d d d d p p d p d p p p p p d p d d d p p p d d d p d p d d d p p d p d d p d p p d p p d p d p d p d p p d d d p d p d d d p p p p p d p p d p p d d d p d d p d p p d p d d d p p d d d d d p p p d d d p d d d d
</body>
</html>
