Question

One would tink that changing :hover of a parent element applies the transformation to each of the child elements. However,

<a href="" class="pressRelease"><div class="pressRelease">
    <div class="timestamp">
        <p class="timestamp">02 Feb 2012</p>
    </div>
    <div class="pressReleaseTitle">
        <p class="pressReleasetitle">release title</p>
    </div>
</div></a>

div.pressRelease :hover {
    background-color:#F2F2F2
}

div.timestamp {
    float:left;
    width: 110px;
    padding-top:10px;
    padding-bottom:21px;
}

div.pressReleaseTitle {
    float:right;
    width:498px;
    padding-top:23px;
    padding-bottom:21px;
    padding-left:25px;
}

a.pressRelease {
    text-decoration:none;
    color:#767676;
    display:block;
    background-color:#063
}

I have this code in the HTML and CSS files, and the behavior is pretty odd: when I hover over the timestamp, only timespamp background color is changed, while the color of press release title remains unchanged. Obviously, I want the whole press release to be highlighted

Any ideas on how to fix this?

Thanks in advance

Answer 1

Try giving float:left to parent div as it is not wrapping child elements with ‘float’

in addition to the error fix mentioned by Praveen

div.pressRelease {
    float: left;
}