css - <a> 悬停不适用于子跨度-6ren

css - 悬停不适用于子跨度

转载作者：太空宇宙更新时间：2023-11-04 15:03:43

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

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

我正在使用 span 来放置元素，我认为这可能是我在悬停时看不到任何效果的原因。

这是我的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>

最佳答案

对于不同跨度上的每个样式，将 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 */
}