JSFiddle - React, Tailwind, and code Playground

by rbyers

HTML

<div id='hoverme'>Hover over me
<div id='clickme'>Click me</div>
</div>
<a href='javascript:alert("NO")'>Don't click here</a>

CSS

div {
    line-height: 40px;
}

#hoverme { 
    background-color: lightblue; 
}
#clickme { 
    background-color: lightgreen;
    display: none; 
}
#hoverme:hover #clickme { 
    display:  block; 
}

JavaScript

document.getElementById('clickme').addEventListener('click', function(e) {
   e.target.textContent += '!';
});