CODEWITHSUNDEEP
sasshover
felixo
felixo

Reputation: 1613

Simple CSS change elements on hover

Its very simple but even after looking at so many examples I cannot seem to get it right! As you can see in this Code Pen, I have a image! Now when I hover the image i want to do various things on the elements with classes .headline .text .title .subtitle. for some reason i am only able to affect any change at all on the .title class! What am i doing wrong?

my html: 

body {
}

.container {
	.headline {
		color: red;
	}

	.foto {
		background-color: lightblue;
		cursor: pointer;
	}
  
  .foto:hover + .headline {
    color:green;
  }
  
  .foto:hover + .title {
    color:maroon;
    position: absolute;
    top: 3em;
    left: 10em;
  }

  //text not working 
  .foto:hover + .text {
    color:maroon;
  }
	.title {
		color: darkgreen;
    font-weight: bold;
    p {
      font-size: 2em;
    }
	}

	.text {
		color: blue;
	}

	.subtitle {
    color: darkred;
	}
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.scss">
</head>

<body>

	<div class="container">
		<h2 class="headline">Sonderausstellungen</h2>
		<div class="foto"><img src="http://oi63.tinypic.com/ifr19y.jpg"/></div>
		<div class="title">
			<p>Land von Indien</p>
		</div>
		<div class="text">
			<p>Lernen wir Indien Kennen</p>
		</div>
		<div class="subtitle">
			<p>Der Text hier is länger als da oben</p>
		</div>
	</div>
</body>

</html>

Upvotes: 0

Views: 53

Answers (1)

jdfink
jdfink

Reputation: 339

The element+element applies to the next immediate element you identify following the first element. It does not search through the DOM looking for the element.

For instance....

.foo+.bar {color:#f00}

<div class="foo"></div>
<div class="bar"></div> --- This gets selected

<div class="foo"></div>
<div class="zanza"</div>
<div class="bar"></div> --- This does not

So, your CSS should look like this:

.foto:hover + .title {...}
.foto:hover + .title + .text {...}
.foto:hover + .title + .text + .subtitle {...}

Or to avoid stacking so many selectors, you could use ~ to select sibling elements at the same level in the DOM:

.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}

Remember, your HTML is being read from top to bottom, and you are not able to target previous sibling elements with CSS. So right now, the way you have your HTML structured, you cannot select the .headline element based on the image :hover because the .headline comes first.

Upvotes: 1

Related Questions