by Ange Tuteur June 10th 2015, 12:37 am
Unfortunately CSS does not have such a pseudo class, so your only solution would be to utilize JavaScript, or a JavaScript library such as jQuery. This is a quick example between the two :
http://forumbeta.forumactif.com/h6-hoverOn the left is CSS and on the right is JavaScript. This is the source if you want to play around with it :
- Code:
<!DOCTYPE html>
<html>
<head>
<title>Hover Example</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
color:#000;
font-size:12px;
font-family:verdana, arial, sans-serif;
background:#DEF;
}
.hoverTable {
background:#EEE;
border:1px solid #DDD;
width:75%;
margin:0 auto;
margin-top:10%;
}
.hoverTable td {
border:1px solid #CCC;
padding:6px 9px;
width:50%;
}
.hoverTable .head td {
text-align:center;
font-weight:bold;
font-size:16px;
font-family:trebuchet ms, verdana, sans-serif;
}
#cssHover:hover {
color:red;
}
#cssHover:hover:after {
content:"You hovered over me !";
color:blue;
display:block;
}
</style>
</head>
<body>
<table class="hoverTable">
<tr class="head">
<td>CSS</td>
<td>JavaScript</td>
</tr>
<tr>
<td><div id="cssHover">Hover me <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
<td><div id="jsHover">Hover me <img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" alt="Smile" longdesc="2" /></div></td>
</tr>
</table>
<script type="text/javascript">//<![CDATA[
(function() {
var node = document.getElementById('jsHover');
node.onmouseover = function() {
this.innerHTML += '<span style="color:green"> You hovered me ! <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" alt="Very Happy" longdesc="1" /></span>';
this.style.color = 'red';
};
node.onmouseout = function() {
this.innerHTML = this.innerHTML.replace(/<span style="color:green"> You hovered me ! <img.*?><\/span>/g, '<span style="color:orange"> You unhovered me.. <img src="http:\/\/illiweb.com\/fa\/i\/smiles\/icon_sad.gif" alt="Sad" longdesc="3" \/></span>');
this.style.color = 'blue';
window.setTimeout(function() {
node.innerHTML = node.innerHTML.replace(/<span style="color:orange"> You unhovered me.. <img.*?><\/span>/g, '');
node.style.color = '';
}, 3000);
};
})();
//]]></script>
</body>
</html>