Question

人们会认为改变：父元素的悬停将转换应用于每个子元素。然而，

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

我在HTML和CSS文件中有这个代码，行为很奇怪：当我将鼠标悬停在时间戳上时，只更改了timepamp背景颜色，而新闻稿标题的颜色保持不变。显然，我希望突出显示整个新闻稿

有关如何解决此问题的任何想法？

提前致谢

Answer 1

错误：

替换：

div.pressRelease :hover

使用：

div.pressRelease:hover

:hover之前不应有任何空格。

建议：

您编写HTML的方式无效。内联元素<a>不能包含块元素<div>。
浏览器会忽略周围的<a>标记。所以，如果你给出如下代码：
```
<a><div><p></p></div></a>
```
它将呈现为
```
<a></a><div><p></p></div>
```

Answer 2

将oveflow:auto添加到a标记以包装内部元素。

从div.pressRelease:hover

中删除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; overflow:auto
}

<强> DEMO

Answer 3

尝试将float:left提供给父div，因为它没有使用'float'

包装子元素

除了Praveen提到的错误修复

div.pressRelease {
    float: left;
}

如何修复div的悬停属性？

3 个答案:

错误：

建议：