2012-03-13 147 views
0

使用以下标记,我创建了一个具有两个浮动文本叠加层的图像,一个用于标题,另一个用于摘要文本。这是呈现我希望的方式,并且我可以使用整个图像以及标题&摘要来访问链接,除了'标题'右侧直到'摘要'末尾的区域。这发生在所有浏览器(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; 
} 
+0

你的CSS没有悬停事件,它是否缺少? – 2012-03-13 19:53:28

回答

1

我会把整个东西包装在一个a标签(更干净的代码)。你需要调整一下你的CSS。

编辑

我改变了div元素span所以语法正确(感谢您的提醒Phrogz)。由于你的css已经有display: blockdiv元素,所以将它们更改为span不是问题。

<a href="Default.aspx"> 
<span class="image">  
    <img src="Assets/Images/Picture.jpg" alt="Picture" /> 
    <span class="overlay">   
    <span class="headline">Headline</span>   
    <span 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.</span>  
    </span> 
</span> 
</a> 
+0

请注意,此标记在HTML4中在语法上无效。 – Phrogz 2012-03-13 20:13:09

+0

哦,对,我需要改变div的跨度。 – ScottS 2012-03-13 20:16:32

+0

作品一种享受!非常感谢,ScottS。 – chut319 2012-03-13 20:39:45

0

的标题被左侧浮动。如果您删除浮动并添加显示:块;到锚点时,它将占据整个图像宽度。