Make h2 inside div also change colour like the rest - html

Question

I am trying to change the colour of an h2 tag inside a div.
The other elements inside this div change to white colour when hovered over, only the h2 does not change colour.
I know I can change this in CSS... .well.sb:hover, .well.sb:hover h2, but the bad thing with that is that the h2 part changes colour separately from the rest. When hovering over the whole thing, everything (including h2) should change text-color into white at the same time and at the same speed and for the same one big and only div section. How to make that work?
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

There are 2 things happening. First, you need to target the h2 more specifically (it's overriding your hover styles). Second, you have conflicting transitions.
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

Just remove color: #444; from h2.title-article-sidebar

Answer 3

Recent version of chrome tend to add transitions in nested elements (not sure about it is a bug or a feature).
Just make sure that children don't have an inherited transition
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

This will solve it:
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

You don't have any problem in your animation as mentioned in some other answers. You have correctly written your code nor there is any specificity problem.
I am attaching a codepen link on which I was trying to solve your problem:
http://codepen.io/Sky-123/pen/mALGQZ
The animations remains intact as you have written them. The only change that I did was added the color:#444 to h2 tag through an inline statement and then removed it on hover in jQuery as it was causing concerns in animation..
Hope it solves your problem.