CSS-Selektor in einem Selektor

Question

Im Wesentlichen versuche ich, ein Element als Hover-Status eines anderen Elements zu reagieren.

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

Nicht gerade arbeiten - das ist ein Ding? Wenn nicht, wie kann ich es erreichen? Ich weiß, dass die Selektoren korrekt sind, sie arbeiten unabhängig voneinander.

Answer 1

Es kann funktionieren, wenn sie eine übergeordnete untergeordnete Beziehung haben.

.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

Was ich denke, Sie sich beziehen ist, dass man so etwas wie

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

Das aus einer solchen Pre-Prozessoren kommt als SCSS gesehen habe (Sass) oder WENIGER, ich nehme an, Sie können eine schnelle Google auf diese tun.

Für den anderen Teil Ihrer Frage, ja, Sie können ein Element anders formatieren, wenn es Elternteil Container oder sogar ein Geschwister ist schwebte.

Beispiel

.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>

Für die Geschwister schweben, bitte beachten Sie, dass, wenn Sie hinzugefügt mehr .sibling-hover Elemente, die alle, aber die erste blau drehen könnte, wenn Sie schwebte über Es ist unmittelbar vorher Geschwister.