Skip to main content
U
Under S.
Inspiring
April 1, 2021
Question

(CSS) Affecting multiple classes on :hover

  • April 1, 2021
  • 2 replies
  • 10486 views

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!

    This topic has been closed for replies.

    2 replies

    B i r n o u
    B i r n o u
    Legend
    April 2, 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>
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 2, 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
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices