There are probably an infinite number of ways to do this, the fastest for me would be to use the CSS the content property, the sibling selector (~) with :hover and :after, like so (copy and paste into a new document)...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick CSS Hover</title>
<style>
div {
display:inline-block;
padding:50px;
border:1px solid black;
}
#text:after {
content:"somethingT";
}
#div1:hover ~ #text:after {
content:"This is the text for div1";
}
#div2:hover ~ #text:after {
content:"This is the text for div2";
}
#div3:hover ~ #text:after {
content:"This is the text for div3";
}
#div4:hover ~ #text:after {
content:"This is the text for div4";
}
#div5:hover ~ #text:after {
content:"This is the text for div5";
}
</style>
</head>
<body>
<div id="div1">something1</div>
<div id="div2">something2</div>
<div id="div3">something3</div>
<div id="div4">something4</div>
<div id="div5">something5</div>
<div id="text"></div>
</body>
</html>
But, it really depends on how your specific HTML is set up and whether you care about mobile users. Mobile devices don't have a mouse, so firing :hover actions becomes tricky.
2
Replies
AdChoices