Question

这非常简单，但是即使看了这么多例子，我似乎也做不清楚！如您在此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>

Answer 1

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首先出现。

悬停时简单的CSS更改元素

1 个答案: