Live
x
<a href="#" class="link hover">Hover your mouse over me</a><a href="#" class="link active">left-click on me and don't let go</a><a href="#" class="link visited">Visit me</a><a href="#" class="link focus">Focus on me with the Tab key</a><div class="hover square">And I am a block element. You can hover your mouse over me</div>
Live
xxxxxxxxxx37
body { font: 20px/1.5 sans-serif;}.link { display: block; margin-bottom: 20px; color: #333; text-decoration: none;}.hover:hover { color: #2196f3;}.active:active { color: #f44336;}.visited:visited { color: #673ab7;}.focus:focus { color: #4caf50;}.square { width: 150px; height: 150px; padding: 50px; font-size: 15px; background: #ccc;}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.