Question

我过去总是能写出像

这样的东西

.hero:hover .child {}

在.child悬停时进行.hero更改。我知道我可以使用+ operator，但过去从未需要它。

我有一个代码在这里展示问题http://codepen.io/mikeCaley/pen/VpYrEq

你会在底部看到：

.p1:hover .p2 {
  width: 60%;
}

但由于未知的原因，它没有效果

Answer 1

你需要更改选择器，因为.p1和p2是兄弟姐妹（即p2不是p1的孩子）：

.p1:hover + .p2 {
  width: 60%;
}

http://codepen.io/anon/pen/mWypqV

Answer 2

你在谈论父子关系，因为div应该嵌套在另一个里面。

我想你在谈论这个.p1:hover > .p2

查看代码段

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  font-size:0;
}

.placeholder {
  display: inline-block;
  height: 100%;
  width: 33.3%;
  background-color: black;
  background-size: cover;
  background-position: 41% 0px;
  background-repeat: no-repeat;
  transition: width 0.2s linear;
}

.p1 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_2_DNT?$retina$);
}

.p2 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_1_DNT?$retina$);
}

.p3 {
  background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_3_DNT?$retina$);
}

.p1:hover > .p2 {
  width: 60%;
}

<div class="slider-wrap">
  <div class="placeholder p1">
  <div class="placeholder p2"></div>
  <div class="placeholder p3"></div>
  </div>
</div>

Answer 3

原来我的问题原因是我最初使用的是嵌套选择器但是在尝试使用兄弟选择器时，即＆＃39; +＆＃39;我不知道只能选择直接的兄弟姐妹，我需要的是〜符号，这是一般的兄弟选择器

在悬停时选择其他元素的行为不符合预期

3 个答案: