Html 因为必要的div阻止了他们成为同级元素，所以在另一个元素的悬停状态下一直试图更改元素？

在元素上悬停时影响另一个元素的方法显然是使用同级选择器，但我有一个嵌套在div中的形状，使其成为三角形，从以下线程：

我不能把我的另一个元素（背景图像）放在那个div中，因为它会破坏它，但是如果我把它放在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;
}

.sprite1{
背景：url（'https://puppydogweb.com/gallery/puppies/beagle.jpg")不重复;；
}
.sprite1{
背景位置：-43px-38px；
宽度：304px；
高度：318px；
}
.精灵1：悬停{
背景位置：-43px-72px；
宽度：304px；
高度：319px；
}
.盒子{
宽度：40%；
填充底部：28.2842712474619%；/*=宽度/平方米（2）*/
位置：相对位置；
溢出：隐藏；
}
.盒子，特里亚{
位置：绝对位置；
顶部：0；左侧：0；
宽度：100%；高度：100%；
背景色：rgba（0,122,199,0.7）；
变换原点：0.100%；
变换：旋转（45度）；
过渡：背景色。3s；
}
.特里亚：悬停{
背景：rgba（255,165,0,0.7）；
}
.tria:悬停~.sprite1{
背景位置：-84px-438px；
宽度：122px；
高度：48px；
}
.tria:悬停+精灵1{
背景位置：-84px-438px；
宽度：122px；
高度：48px；
}
.tria:hover>.sprite1{
背景位置：-84px-438px；
宽度：122px；
高度：48px；
}
.tria:悬停.精灵1{
背景位置：-84px-438px；
宽度：122px；
高度：48px；
}

小提琴：

而且我真的不想使用Javascript

---

如果有人能告诉我一个关于css儿童和父母的资源，我将不胜感激。我不知道术语，所以很难查找。

你是对的，使用CSS的唯一方法是使用同级选择器。查看HTML，三角形DIV

没有任何兄弟元素，因为它是其父DIV

的唯一子元素

您可以将同级选择器更改为

，因为它与要生效的DIV处于同一级别。唯一的问题是同级选择器只能选择DOM下面的元素，它不能选择前面的元素，因此您需要对html重新排序，例如：

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

---

是的，我知道，但如果我这样做，悬停会触发，如果它在盒子上，而不仅仅是三角形，这是三角形的点。难道没有一种方法可以使三角形和图像成为兄弟，而不必将它们都放在box div中吗？我试着在图像和.triangle周围放置一个div类，但这并不能使它们都成为它的子对象，但它不起作用。纯CSS无法做到这一点，需要JS

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