raulbaros raulbaros - 1 month ago 11
CSS Question

Make h2 inside div also change colour like the rest

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

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>