HTML CSS Hover over class -->action in other class

wfypjpf4 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(108)

此代码对第1行的悬停起作用（给出红色的第3行），也对照片的悬停起作用（给出新照片）。
我想如果你悬停在第一行，这也是照片悬停（和第三红线）。所以，悬停在'悬停在我'应该给予一个红线+一个新的照片。
实际代码为

.sibling-hover,
#parent {
  cursor: pointer;
}

.sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}

.kid {
  position: relative;
  display: block;
  min-width: 60px;
  height: 60px;
  line-height: 70px;
  text-align: center;
}

.kid img {
  display: block;
  opacity: 1;
  height: auto;
  transition: .6s ease;
  width: 10%;
  position: absolute;
  z-index: 12;
}

.kid img:hover {
  opacity: 0;
}

.kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}

<div>
  <div class="sibling-hover">hover over me</div>
  <div>I do nothing</div>
  <div>I do nothing</div>
  <div class="sibling-highlight">I get highlighted</div>
  <div class="sibling-highlight">
    <div class="kid"><img src="https://www.westville.be/media/p4ra1gja/205extgb2boldcam-b6.jpg" /><img src="https://www.westville.be/media/r1gd3rrd/205extgb2boldcam-a3.jpg" /></div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75997219/html-css-hover-over-class-action-in-other-class

2条答案

按热度按时间

xmq68pz91#

你可以这样做：

.sibling-hover:hover~.sibling-highlight>.kid>img:first-child {
      opacity: 0
    }

通过在中选择第一个img，使用您已经拥有的.sibling-highlight类逻辑

.sibling-hover,
#parent {
  cursor: pointer;
}

.sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}
/* ADDED HERE */
.sibling-hover:hover~.sibling-highlight>.kid>img:first-child {
  opacity: 0;
}

.kid {
  position: relative;
  display: block;
  min-width: 60px;
  height: 60px;
  line-height: 70px;
  text-align: center;
}

.kid img {
  display: block;
  opacity: 1;
  height: auto;
  transition: .6s ease;
  width: 10%;
  position: absolute;
  z-index: 12;
}

.kid img:hover {
  opacity: 0;
}

.kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}

<div>
  <div class="sibling-hover">hover over me</div>
  <div>I do nothing</div>
  <div>I do nothing</div>
  <div class="sibling-highlight">I get highlighted</div>
  <div class="sibling-highlight">
    <div class="kid"><img src="https://www.westville.be/media/p4ra1gja/205extgb2boldcam-b6.jpg" /><img src="https://www.westville.be/media/r1gd3rrd/205extgb2boldcam-a3.jpg" /></div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-13

im9ewurl2#

你为什么不只是“扩展”你已经写好的选择器。

.sibling-hover:hover~.sibling-highlight {
  background-color: red;
  color: white;
}

.sibling-hover:hover~.sibling-highlight .kid img:hover {
  opacity: 0;
}

 .sibling-hover:hover~.sibling-highlight .kid img+img {
  display: block;
  opacity: 1;
  position: relative;
  z-index: 10;
}

赞(0）回复(0）举报 2023-04-13

我来回答

HTML CSS Hover over class -->action in other class

2条答案

相关问题

热门标签

最新问答