セレクタ内のCSSセレクタ

Question

私がしようとしているのは、ある要素を別の要素のホバー状態として反応させることです。

.page-template-page-services-new .imgBlock:hover { .page-template-page-services-new .ButtonService {color: #6395ce; background-color: #fff; } }

現在動作していない - これは事ありますか？そうでない場合は、どうすれば達成できるでしょうか。私はセレクタが正しいことを知っている、彼らは独立して動作します。

Answer 1

親子関係がある場合は機能します。

.page-template-page-services-new { 
 
    background: #ccc; 
 
} 
 
.page-template-page-services-new .imgBlock:hover .ButtonService { 
 
    color: #6395ce; 
 
    background-color: #fff; 
 
}

<div class="page-template-page-services-new"> 
 
    <div class="imgBlock"> 
 
    <img src="http://placehold.it/100/100" alt=""> 
 
    <div class="ButtonService"> 
 
     <p> 
 
     This is a test 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私はあなたが参照している考えるすることで、これには、SCSS（サス）としてプリプロセッサから来

.selector-one{ 
    //style definitions 
    .selector-two{ 
    //other style definitions 
    } 
} 

に似て何かを見てきたということですまたは、私はあなたがそれらについて素早くgoogleをすることができると仮定します。

質問の他の部分については、はい、は、親コンテナまたは兄弟姉妹であっても、要素が違うようにスタイルを設定します。兄弟ホバーのために

例

.container-hover:hover .red-on-hover{ 
 
background-color:red; 
 
} 
 

 
.sibling-hover:hover + .sibling-hover{ 
 
    background-color:blue; 
 
}

<div class="container-hover"> 
 
    <h3>Other Text</h3> 
 
    <div class="red-on-hover">Background will turn red on hover</div> 
 
</div> 
 

 
<p class="sibling-hover"> When I am hovered, my sibling will be blue</p> 
 
<p class="sibling-hover"> Blue? Blue</p>

、あなたはより多くの.sibling-hover要素を追加した場合は、オーバー推移した場合すべてが、最初の1が青色にすることができるだろうということに注意してください。直前の兄弟です。