<a>懸停不能用小孩跨越

我正在創建一個收件箱，並且我希望懸停的消息更改背景顏色。

我使用跨度來放置項目，我估計這可能是我在懸停時看不到任何效果的原因。

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

來源

2013-04-22 Simon Malone

請分享您在http://jsbin.com上的代碼，以便我們可以看到您的問題。然後發佈後續評論。 – 2013-04-22 09:14:13

或jsfiddle.net – Kyle 2013-04-22 09:14:32

你應該申請「clearfix」到a元素，因爲它的所有內容是自由浮動，導致a 0高度。

如果你不知道clearfix是什麼，看看What methods of ‘clearfix’ can I use?

來源

2013-04-22 09:18:20 krcko

對於每對不同跨度的樣式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/

來源

2013-04-22 09:19:12

非常感謝 - 它像一個魅力 – 2013-04-22 09:21:29

@SimonMalone很高興我能幫上忙。這是因爲浮動塊元素的容器不會兌現實際高度。相反，嵌套元素溢出容器，其高度爲0.您可以閱讀有關clearfixes的信息，以查看有關該問題的示例/解決方案。 – 2013-04-22 09:25:32

上面的代碼是工作在Firefox和克羅默但不是在IE 爲請把下面的標籤頁面頂部

<!doctype html>

來源

2013-04-22 09:45:13

<a>懸停不能用小孩跨越

回答

相關問題