Data attributes and JS/CSS interplay

by ischenkodv

HTML

Roll over to see player name and score:

<div id="player">
        <ul>
            <li class="name">Joe</li>
            <li class="score">100</li>
        </ul>
    </div>

    <div id="dataplayer" data-name="Joe" data-score="100"></div>

    <button id="changescore50">Change score to 50</button>
    <button id="changescore10">Change score to 10</button>

CSS

body {font-family: futura, helvetica}

#player {
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50% 50%;
    position: relative;
    margin: 50px;
}
#dataplayer {
    background: red;
    width: 100px;
    height: 100px;
    border-radius: 50% 50%;
    position: relative;
    margin: 50px;
}
#player .name {
    opacity: 0;
    position: absolute; 
    left: -50px;
    border: 1px solid #999;
    background: #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    transition: 0.5s;
}
#player .score {
    opacity: 0;
    position: absolute; 
    left: 100px;
    border: 1px solid #999;
    background: #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    transition: 0.5s;
}
#player:hover .score, #player:hover .name {
    opacity: 1;
}
#player .low {
   background: #f33;
}

#dataplayer::after {
    opacity: 0;
    content: attr(data-name);
    position: absolute; 
    left: -50px;
    border: 1px solid #999;
    background: #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    transition: 0.5s;
}
#dataplayer::before {
    opacity: 0;
    content: attr(data-score);
    position: absolute; 
    left: 100px;
    border: 1px solid #999;
    background: #ccc;
    padding: 5px 10px;
    border-radius: 3px;
    transition: 0.5s;
}
#dataplayer:hover::before, #dataplayer:hover::after {
    opacity: 1;
}
#dataplayer[data-score='10']::before {
    background: #f33;
}

JavaScript

document.querySelector('#changescore10').addEventListener('click', 
    function(ev) {
        document.querySelector('#player .score').innerHTML = 10;
        document.querySelector('#player .score').classList.add('low');
        document.querySelector('#dataplayer').dataset.score = 10;
    ev.preventDefault();
}, false);

document.querySelector('#changescore50').addEventListener('click', 
    function(ev) {
        document.querySelector('#player .score').innerHTML = 50;
        document.querySelector('#player .score').classList.remove('low');
        document.querySelector('#dataplayer').dataset.score = 50;
    ev.preventDefault();
}, false);