Застревает при попытке изменить элемент при наведении на другой элемент, потому что необходимый div останавливает их от родных братьев?

Question

Путь повлиять еще один элемент на зависший на элементе, по-видимому с селектором родственного, но у меня есть форма, которая вложена в DIV, чтобы сделать это треугольник, из этой темы: 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, ваш треугольник DIV <div class="tria"></div> не имеет братьев и сестер, потому что это единственный дочерний элемент родительского 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 */ 
}