Простые CSS-элементы изменения при наведении - PullRequest
Новая
       9

Простые CSS-элементы изменения при наведении

0 голосов
/ 22 февраля 2019

Это очень просто, но даже после того, как я посмотрел так много примеров, я не могу понять это правильно!Как вы можете видеть в этом Code Pen , у меня есть изображение!Теперь, когда я наведите курсор на изображение, я хочу сделать различные вещи с элементами с классами .headline .text .title .subtitle.по какой-то причине я могу повлиять только на любые изменения в классе .title!Что я делаю не так?

мой 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>

1 Ответ

0 голосов
/ 22 февраля 2019

element+element применяется к следующему немедленному элементу, который вы идентифицируете после первого элемента.Он не ищет в DOM, ища элемент.

Например .... 

.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

Итак, ваш CSS должен выглядеть так: 

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

Или чтобы избежать наложения столь большого количества селекторов, вы можете использовать ~ для выбора элементов одного уровня в DOM: 

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

Помните, ваш HTML читается сверху вниз, и выне в состоянии предназначаться для предыдущих родственных элементов с CSS.Итак, прямо сейчас, так как вы структурировали свой HTML, вы не можете выбрать элемент .headline на основе изображения :hover, потому что .headline стоит первым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...