Question

我有一个我不明白的问题。

我正在创建一个收件箱，我希望悬停的消息能够改变背景颜色。

我正在使用跨度放置物品，我认为这可能是我在悬停时看不到任何效果的原因。

这是我的css代码：

#mainPanel #inbox h3 #fromSubjectHeader {
display: inline-block;
font-style:italic;
width: 177px;
float:left;
text-align:left;
}

#mainPanel #inbox h3 #dateHeader {
display:block;
font-style:italic;
width:177px;
text-align: left;
float:left;
}

#mainPanel #inbox a #fromSubject {
display: inline-block;
width: 173px;
float:left;
text-align:left;
padding-left: 4px;
}

#mainPanel #inbox a #date {
display:block;
width:173px;
text-align: left;
float:left;
padding-left: 4px;
}

#mainPanel #inbox a {
font-weight:normal;
text-decoration:none;
color:#000000;
display:block;
font-size:11px;
line-height: 16px;
width:535px;
}

#mainPanel #inbox a #unreadInbox {
font-weight:bold;
color:#165E8A;
}

#mainPanel #inbox a:hover { 
background:#B0DFF2; 
}

在html代码中，它就像这样调用

<a>
<span id="fromSubject"></span>
<span id="fromSubject"></span>
<span id="date"></span>
</a>

Answer 1

对于各种跨度上的每个样式，将display属性设置为inline-block并删除float属性。这将允许a标记扩展到其内容的高度。

#mainPanel #inbox a #fromSubject {
    display: inline-block;
    /* Rest of Styles */
}

#mainPanel #inbox a #date {
   display:inline-block;
   /* Rest of Styles */
}

#mainPanel #inbox a {
  display:inline-block;
  /* Rest of Styles */
}

工作示例 http://jsfiddle.net/Ns6ag/

Answer 2

您应该将“clearfix”应用于a元素，因为它的所有内容都会浮动，导致a的高度为0。

如果您不知道clearfix是什么，请查看What methods of ‘clearfix’ can I use?

Answer 3

以上代码适用于FireFox和Chrome，但不适用于IE 为此，请将以下标记放在页面顶部

<!doctype html>

<a> hovering not working with child spans</a>

3 个答案: