I have a simple question that I couldn't find a direct answer to, so here it is: I have two boxes and I want to hover over the first one but have it affect the second one (meaning when hovering over the first box, the second box should scale up with a transition effect). Is this achievable with CSS alone or would I need to use JavaScript as well? Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}
.a {
width: 100px;
height: 100px;
border : 1px solid black;
line-height: 100px;
text-align: center;
}
.c{
width: 100px;
height: 100px;
border : 1px solid black;
line-height: 100px;
text-align: center;
}
.d:hover {
transform: scale(1.2);
transition: all 0.9s ease-in-out;
}
</style>
</head>
<body>
<div class="a b">Hover me</div>
<div class="c d">Affect me</div>
</body>
</html>