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

2つのことが起こっています。まず、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>

Answer 2

だけ削除色：＃444; from h2.title-article-sidebar

Answer 3

クロームの最近のバージョンでは、入れ子になった要素にトランジションを追加する傾向があります（バグや機能についてはわかりません）。

ただ、子供が継承された移行

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; 
 
} 
 
.sb * { 
 
    transition: 0s; 
 
}

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

を持っていないということ。これは、それを解決することを確認してください。

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

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

あなたは、いくつかの他の回答で述べたように、あなたのアニメーションで問題ありません。あなたのコードを正しく書いたことがなく、specificityの問題があります。 http://codepen.io/Sky-123/pen/mALGQZ

アニメーションはあなたがそれらを書いてきたようにそのまま残り：

は、私はあなたの問題を解決しようとされたcodepenリンクを添付しています。私がやった唯一の変化は、インライン声明を通じてcolor:#444h2にタグを追加し、それが

が、それはあなたの問題を解決を願って...アニメーションに懸念を引き起こしたとして、その後 jQueryに hoverでそれを取り除きました。