(CSS) Affecting multiple classes on :hover

Report · Apr 01, 2021

I have a tower-shaped clickable area that kinda looks like this :
<a class="clickable-area">
<div class="icon"></div>
<h1>Name</h1>
<p>Detailed description</p>
</a>

3 block elements stacked on top of each other, wrapped in a <a> tag, which represents the clickable area.

How would one go about affecting all 3 child elements of <a> (in other words : .icon, h1 and p) when hovering over any portion of <a>? For example, if we want a:hover to trigger an .icon image change + h1 color change + p position change, all in sync.

I heard there was a way via '+' but it's pretty tricky, and trickier still to Google info about. (I'm thinking the fact that these are all child elements of <a> might make them easier to sync, but it might not for all I know.)

PS: It's entirely possible that this cannot be done via CSS alone, in which case I'm just looking for confirmation.

Thanks!

Report · Apr 01, 2021

Try this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
a.clickable{text-decoration:none; color: tomato;}
a.clickable:hover {color:firebrick; text-decoration:underline;}
</style>

</head>
<body>
<hr>
<a href="#" class="clickable">
<section>
<i class="icon">@</i>
<h1>Name</h1>
<p>Lorem ipsum dolor...</p>
</section>
</a>
<hr>
<a href="#" class="clickable">
<section>
<i class="icon">@</i>
<h1>Name</h1>
<p>Lorem ipsum dolor...</p>
</section>
</a>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 01, 2021

Perhaps that I missunderstood what you mean, but that what I was thinking...

<meta charset="utf-8">
<title>Hovering</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
	* {
		margin: 0;
		padding: 0;
	}
	.icon {
		position:relative;
		width:120px;
		height:60px;
	}
	img {
  		position:absolute;
  		left:0;
	}

	p, img {
	  transition: all 0.7s ease-out;
	}
	a:hover > .icon img.iconup { opacity:0; }
	a:hover > h1 { color:red;}
	a:hover > p { transform: translateX(200px);}
</style>

</head>
<body>
<a class="clickable-area">
  <div class="icon">
	  <img class="icondown" src="https://www.fillmurray.com/120/60">
	  <img class="iconup" src="https://loremflickr.com/120/60">  	
  </div>

  <h1>THE TITLE</h1>
  <p>THE PARAGRAPH</p>
</a>
</body>
</html>

(CSS) Affecting multiple classes on :hover

Photos