使用以下标记,我创建了一个具有两个浮动文本叠加层的图像,一个用于标题,另一个用于摘要文本。这是呈现我希望的方式,并且我可以使用整个图像以及标题&摘要来访问链接,除了'标题'右侧直到'摘要'末尾的区域。这发生在所有浏览器(IE9和更低版本除外)。任何想法为什么以及如何解决它?防止悬停的CSS内联元素
HTML:
<div class="image">
<a href="Default.aspx"><img src="Assets/Images/Picture.jpg" alt="Picture" /></a>
<div class="overlay">
<a href="Default.aspx" class="headline">Headline</a>
<a href="Default.aspx" class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</a>
</div>
</div>
CSS:
body {
border: 0;
color: #5B6064;
font-family: Helvetica, Arial, Sans-Serif;
font-size: .75em;
line-height: 1.6em;
margin: 0;
padding: 0;
background-color: #a5a5a5;
}
a {
text-decoration: none;
color: #5B6064;
}
a:visited {
text-decoration: none;
}
img {
border: 0;
}
.image {
position: relative;
width: 100%;
/* For IE6 */
display: block;
overflow: hidden;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
display: block;
}
.headline {
color: #FFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary {
max-width: 350px;
margin-top: 3px;
color: #FFF;
font: 14px/14px Helvetica, Sans-Serif;
letter-spacing: 0;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary a {
color: #FFF;
}
你的CSS没有悬停事件,它是否缺少? – 2012-03-13 19:53:28