I have multiple Div's on my webpage and I am looking to change the color and image when a mouse hovers over them.
Changing the text color from grey to blue is quite simple.
CSS
#div1:hover{color:#0000CC}
If I want to change an image, I can achieve that using the following code:
CSS
a img:last-child {
display: none;
}
a:hover {
Color: var(--Ability-orange);
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
Both tasks are easy to accomplish..
However, if there is a div with text and two images inside, hovering over the div only changes the text (hovering over the image as it's in the div changes both).
Any suggestions?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vision</title>
<style>
.container {
padding: 25px;
overflow-x: hidden;
height: 90%;
}
#div1:hover {
Color: #0066CC;
}
a img:last-child {
display: none;
}
a:hover img:last-child {
display: block;
}
a:hover img:first-child {
display: none;
}
</style>
</head>
<body>
<div class="container">
<!-- page container-->
<div id="div1" style="font-size:x-large">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%">
<a><img src="../Images/on.png" width="32" height="32" /> <img src="../Images/off.png" width="32" height="32" /></a>
</td>
<td width="98%">Change this text</td>
</tr>
</table>
</div>
</div>
<!-- page container-->
</body>
</html>