html - 使 div 内的 h2 也像其他部分一样改变颜色

Question

我正在尝试更改 div 内的 h2 标签的颜色。将鼠标悬停在该 div 中的其他元素会变为白色，只有 h2 不会改变颜色。我知道我可以在 CSS 中更改它....well.sb:hover, .well.sb:hover h2，但这样做的坏处是 h2部分与其余部分分开改变颜色。当鼠标悬停在整个东西上时，所有内容(包括 h2)都应该同时以相同的速度将文本颜色更改为白色，并且对于同一个大且唯一的 div 部分。如何实现？

h2.title-article-sidebar {
    font-size: 14px;
    font-family: Calibri;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin-top: 0;
}

.article-image-summary-sidebar {
    border: 0 solid;
    padding-bottom: 0;
    -moz-transition: .9s ease;
    -webkit-transition: .9s ease;
    -o-transition: .9s ease;
    -ms-transition: .9s ease;
    transition: .9s ease;
}

.well.sb:hover {
        color: #FFF;
        background-color: #A10000;
        text-decoration: none;
        -moz-transition: .6s ease-in-out;
        -webkit-transition: .6s ease-in-out;
        -o-transition: .6s ease-in-out;
        -ms-transition: .6s ease-in-out;
        transition: .6s ease-in-out;
    }

 <div class="well sb"><div>
      
        <div class="article-image-summary-sidebar">
            <img alt="X" src="http://loremxpixel.com/200/200">
            <div class="article-date-summary-sidebar">
                20-November-2010
                
            </div>
            <div class="article-tag-summary-sidebar">
                TAG
            </div>
            <h2 class="title-article-sidebar">
               TITLE WITH H2 TAG!!!!
            </h2>
        </div>
    </div></div>

Answer 1

有两件事正在发生。首先，您需要更具体地定位 h2(它会覆盖您的悬停样式)。其次，您有冲突的过渡。

h2.title-article-sidebar {
    font-size: 14px;
    font-family: Calibri;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin-top: 0;
}

.article-image-summary-sidebar {
    border: 0 solid;
    padding-bottom: 0;
    /* -moz-transition: .9s ease;
    -webkit-transition: .9s ease;
    -o-transition: .9s ease;
    -ms-transition: .9s ease;
    transition: .9s ease; */
}

.well.sb:hover {
    color: #FFF;
    background-color: #A10000;
    text-decoration: none;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.well.sb:hover h2.title-article-sidebar {
    color: #FFF;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}

<div class="well sb"><div>
      
    <div class="article-image-summary-sidebar">
        <img alt="X" src="http://loremxpixel.com/200/200">
        <div class="article-date-summary-sidebar">
            20-November-2010
            
        </div>
        <div class="article-tag-summary-sidebar">
            TAG
        </div>
        <h2 class="title-article-sidebar">
           TITLE WITH H2 TAG!!!!
        </h2>
    </div>

</div></div>