CSS股利鏈接文本下劃線懸停

我有一個簡單的div像這樣...CSS股利鏈接文本下劃線懸停

<a href="#"> 
    <div class="promo-box promo-1"> 
    <div class="promo-content"> 
    <h2>Heading here</h2> 
    <p>Text content here.</p> 
    </div> 
    </div> 
</a>

...這讓我改變DIV懸停背景顏色。效果很好，但結果是，我在鏈接中顯示懸停下劃線的文字。我已經嘗試了幾種方法來定位h2和p，但仍然無法擺脫懸停時的文字裝飾。

關於什麼html元素我需要針對應用文本裝飾：無？的任何想法？

CSS這裏...

.promo-box 
{ 
text-align:center; 
border-radius:5px; 
padding:10px; 
margin-bottom:20px; 
min-height:240px; 
} 
h2 
{ 
font-family:Lato, Arial, Helvetica, sans-serif; 
font-weight:700; 
color:#FFF; 
font-size:20px; 
text-decoration: none; 
} 
.promo-box p 
{ 
font-family:'Open Sans', Arial, Helvetica, sans-serif; 
font-weight:400; 
color:#FFF; 
font-size:16px; 
line-height:16px; 
} 
.promo-1 
{ 
background-color:#125595; 
} 
div.promo-1:hover; 
}

來源

2014-01-21 lowercase

顯示您現有的CSS將是有益的 –

需要文本修飾適用於鏈接不h2或p這樣的：

a{ 
    text-decoration:none; 
}

你不能風格text-decoration:none申請線內的元素。
如果yu不適用於所有鏈接此規則，則可以爲該鏈接分配一個類，併爲此創建類。

例裏面插入CSS

.not-underline{ 
     text-decoration:none; 
    }

更新HTML添加類到你的鏈接

<a href="#" class="not-underline> 
    <div class="promo-box promo-1"> 
    <div class="promo-content"> 
    <h2>Heading here</h2> 
    <p>Text content here.</p> 
    </div> 
    </div> 
</a>

DEMO

來源

2014-01-21 20:53:08

我的理解是 - 但適用於該網站上的所有鏈接。我只想定位此框中的鏈接。 h2 AND P. – lowercase

申請一個類的鏈接和使用類內選擇器裏面的CSS是一種很好的方式來風格你的鏈接不是所有的鏈接@lowercase –

我明白，但任何企圖直接針對這些失敗。我正在做一些不正確的事情。 – lowercase

，避免文字下劃線上懸停，這增加的一類你的css：

a:hover{ 
    text-decoration:none; 
    }

來源

2014-01-21 20:57:53

您可以在CSS中的錨標記之前添加父選擇器名稱。

<div class='display'> 
    <a href="#"> 
    <div class="promo-box promo-1"> 
     <div class="promo-content"> 
     <h2>Heading here</h2> 
     <p>Text content here.</p> 
     </div> 
    </div> 
</a> 
</div>

CSS：

.display a{ 
    text-decoration:none !important; 
}

這裏是一個demo

來源

2014-03-27 11:02:22

CSS股利鏈接文本下劃線懸停

回答

相關問題