CSSの別の要素のホバーから特定の要素をターゲットにすることができます

Question

私はブートストラップpanelを持っており、その上にカーソルを置くと、borderとpanel-headingのbackground-colorが変更されます。

私はborderの色を変更することができますが、パネルを入手する方法はありますかbackground-colorも変更しますか？

ここで何らかのネスティングが必要ですか？

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

ことが可能であり、それは非常に簡単です。

CSS：

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

あなたがパネルにカーソルを合わせると国境を見出し、このコードの変更パネル。 CSSの特異性を覚えて、ブートストラップのCSSを適切に上書きしてください。

Answer 2

あなたはhoverpanelは、子

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

これは、panel-heading

をターゲットにする必要があります。あなたは.panel-defaultを合わせると、.panel-headingの背景色が灰色に変わります。