0

人们会认为更改 :hover 父元素会将转换应用于每个子元素。然而，

<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 文件中有这段代码，行为很奇怪：当我将鼠标悬停在时间戳上时，只有时间戳背景颜色发生变化，而新闻稿标题的颜色保持不变。显然，我希望突出显示整个新闻稿

有想法该怎么解决这个吗？

提前致谢

4

3 回答 3

3

错误：

代替：

div.pressRelease :hover

和：

div.pressRelease:hover

前面不应该有任何空格:hover。

建议：

  1. 您编写 HTML 的方式无效。内联元素<a>不能包含块元素<div>。

  2. 浏览器将忽略周围的<a>标签。因此，如果您提供如下代码：

     <a><div><p></p></div></a>

    它将呈现为

     <a></a><div><p></p></div>
于 2013-01-17T07:40:43.117 回答
1

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

并从中删除 divdiv.pressRelease:hover

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

演示

于 2013-01-17T07:42:29.503 回答
1

尝试给float:left父 div，因为它没有用 'float' 包装子元素

除了 Praveen 提到的错误修复

div.pressRelease {
    float: left;
}
于 2013-01-17T07:58:25.157 回答