他の要素のホバー上の要素を変更しようとすると、必要な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; 
} 

フィドル： https://jsfiddle.net/csskg4t9/2/

また、私は本当にJavascriptを使用したくありません。

誰でも私にcssの子供と親についてのリソースを教えてもらえれば幸いです。私は用語を知っていないので、調べるのが難しいです。

Answer 1

あなたは正しいですが、CSSでこれを行う唯一の方法は兄弟セレクタです。それはあなたは、そのDIVあなたと同じレベルに<div class="box"></div>に兄弟セレクタを変更することができ、親DIV <div class="box"></div>

の唯一の子要素であるので、あなたのHTMLを見てみると、あなたの三角形DIV <div class="tria"></div>は、任意の兄弟を持っていません効果を出したい唯一の問題であること兄弟セレクタはあなたがHTMLを再注文する必要がありますので、それは、前の要素を選択することはできません、DOMのさらに下の要素を選択するので、何かのようなことができます。

：セレクタのように続いて

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

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