Css mouse verfolger
Mouseverfvolger erstellt man eigentlich mit Javascript.
Hier ist eine Möglichkeit, wie es auch mit CSS geht.
Das hier benutzte Javascript ist nur für die Erstellung der Unmengen an nötigen div Containers da.
Die man natürlich auch so in den HTML-Code einfügen könnte
Der hier verwendete Code
<style>
body{
overflow:hidden;
display:flex;
margin:0;
padding:0;
margin-top:-10px;
}
#info{
position:fixed;
top:10px;
height:60px;
width:150px;
background:rgba(0,0,0,0.8);
color:white;
pointer-events:none;
}
.box{
width:10px;
height:10px;
border-radius:50%;
border:0px solid black;
transition:all 2000ms;
}
.box:hover{
background:red;
transition:all 10ms;
}
body> .info{
position:fixed;
top:70px;
height:50px;
width:150px;
left:0;
background:rgba(0,0,0,0.7);
fot-size:20px;
color:white;
text-align:center;
font-size:20px;
}
</style>
<body>
<span id="info"></span>
<span class="info" id="csslesen"></span>
</body>
<script>
window.addEventListener('resize',erstelle);
function erstelle(){
var boxen = document.querySelectorAll('body>div');
boxen.forEach((i) => {
i.remove();
})
var t=document.getElementsByTagName('body')[0];
var breite1=window.innerWidth;
var breite=(breite1/10).toFixed(0);
var hoch1=window.innerHeight;
var hoch=(hoch1/10).toFixed(0);
console.log(breite+'='+hoch)
var gesamt=breite*hoch;
document.getElementById('info').innerHTML='Height = '+hoch+'<br> Breite = '+breite+'<br>Gesamt div ='+gesamt.toFixed(0);
var p=0;
for(a1=0;a1<breite;a1++){
div1=document.createElement('div');
div1=document.getElementsByTagName('body')[0].appendChild(div1);
for(var a2=0;a2<hoch;a2++){
div2=document.createElement('div');
div2.className='box box'+p;
p++;
div1.appendChild(div2)
}
}
var boxen = document.querySelectorAll('div>.box');
boxen.forEach((i) => {
i.addEventListener('mouseover',function(){
document.getElementById('csslesen').innerHTML=i.className;
})
})
}
erstelle();
</script>