防止懸停的CSS內聯元素

使用以下標記，我創建了一個具有兩個浮動文本疊加層的圖像，一個用於標題，另一個用於摘要文本。這是呈現我希望的方式，並且我可以使用整個圖像以及標題&摘要來訪問鏈接，除了'標題'右側直到'摘要'末尾的區域。這發生在所有瀏覽器（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; 
}

來源

2012-03-13 chut319

你的CSS沒有懸停事件，它是否缺少？ – 2012-03-13 19:53:28

我會把整個東西包裝在一個a標籤（更乾淨的代碼）。你需要調整一下你的CSS。

編輯

我改變了div元素span所以語法正確（感謝您的提醒Phrogz）。由於你的css已經有display: block爲div元素，所以將它們更改爲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>

來源

2012-03-13 20:05:45 ScottS

請注意，此標記在HTML4中在語法上無效。 – Phrogz 2012-03-13 20:13:09

哦，對，我需要改變div的跨度。 – ScottS 2012-03-13 20:16:32

作品一種享受！非常感謝，ScottS。 – chut319 2012-03-13 20:39:45

的標題被左側浮動。如果您刪除浮動並添加顯示：塊;到錨點時，它將佔據整個圖像寬度。

來源

2012-03-13 20:01:17

防止懸停的CSS內聯元素

回答

相關問題