html - 因为必要的 div 阻止它们成为 sibling ，所以坚持尝试在其他元素悬停时更改元素？

Question

在悬停在一个元素上时影响另一个元素的方法显然是使用同级选择器，但我有一个形状嵌套在 div 中以使其成为三 Angular 形，来自这个线程:Hover and click on CSS triangle

我不能将我的其他元素(背景图像)放入那个 div 中，因为它会破坏它，但如果我将它放在它外面，它就不再是兄弟了。

<div class="sprite1"> </div>

<div class="box"> 

<div class="tria"> </div>
<!-- <div class="sprite1"> </div> -->
</div>

    .sprite1 {
    background: url('https://puppydogweb.com/gallery/puppies/beagle.jpg') no-repeat;

}

.sprite1 {
    background-position: -43px -38px;
    width: 304px;
    height: 318px;
}
.sprite1:hover {
    background-position: -43px -72px;
    width: 304px;
    height: 319px;
}

.box {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
}
.box .tria  {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}

.tria:hover {
               background: rgba(255, 165, 0, 0.7);
}
.tria:hover ~ .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}
.tria:hover + .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}
.tria:hover > .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}
.tria:hover .sprite1 {
    background-position: -84px -438px;
    width: 122px;
    height: 48px;
}

fiddle : https://jsfiddle.net/csskg4t9/2/

而且我真的不想使用 Javascript。

如果有人能指导我找到有关 css 子项和父项的资源，我将不胜感激。我不知道术语，所以很难查找。

Answer 1

你是对的，用 CSS 做到这一点的唯一方法是使用兄弟选择器。查看您的 HTML，您的三 Angular 形 DIV <div class="tria"></div>没有任何 sibling ，因为它是其父 DIV 的唯一子元素 <div class="box"></div>

您可以将兄弟选择器更改为 <div class="box"></div>因为它与您要影响的 DIV 处于同一级别。唯一的问题是兄弟选择器只能选择 DOM 下方的元素，它不能选择前面的元素，所以你需要重新排序 html，比如:

<div class="box"> 
    <div class="tria"></div>
</div>
<div class="sprite1"></div>

然后是这样的选择器:

.box:hover + .sprite1 {
    /* Styles here */
}