Kann ich ein bestimmtes Element von einem anderen Element in css schweben

Question

Ich habe einen Bootstrap panel und wenn ich den Mauszeiger darüber halte, möchte ich die border und panel-heading 's background-color ändern.

Ich kann die border Farbe ändern, aber gibt es eine Möglichkeit, dass ich das Panel background-color auch ändern kann?

Benötigen Sie hier eine Verschachtelung?

div.panel:hover { 
 
    border: 1px solid grey; 
 
    /*I want the panel-heading to be grey*/ 
 
} 
 
.panel-default > .panel-heading { 
 
    background-color: #16749F; 
 
    color: #ddd; 
 
} 
 
.panel-default > .panel-heading:hover { 
 
    background-color: grey; 
 
}

Answer 1

Es ist möglich, und es ist sehr einfach.

CSS:

.panel:hover .panel-heading { 
    border: 1px solid grey; 
} 

Dieser Code ändert Panel Überschrift Grenze, wenn Sie über Ihre Platte schweben. Denken Sie an CSS-Spezifität und überschreiben Sie Bootstraps CSS richtig.

Answer 2

Sie müssen hover die panel dann gezielt das Kind panel-heading

.panel-default > .panel-heading { 
 
    background-color: #16749F; 
 
    color: #ddd; 
 
} 
 
.panel:hover > .panel-heading { 
 
    background: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Panel title</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    Panel content 
 
    </div> 
 
</div>

Answer 3

.panel-default:hover > .panel-heading { 
    background-color: grey; 
} 

Das bedeutet: Wenn Sie .panel-default schweben, die Hintergrundfarbe von .panel-heading wird Grau ändern.