CSS不能爲文本div工作

我有一行divs：懸停，當我將鼠標懸停在div內的圖像上時它正在工作。但是，它不想爲文本工作。我在HTML和CSS的新一面，所以幫助表示讚賞。我必須錯過明顯的東西？CSS不能爲文本div工作

第一個使用div.topIconsHover：hover CSS的作品。另一個沒有。我曾嘗試將topIconsHover類應用於div，但它仍然無效。那麼，我必須在HTML中做錯了什麼？但我不確定是什麼。幫助讚賞！謝謝。

注：我有一個外部工作表中的CSS。

div.topIconsHover:hover { 
    background-color:#555555; 
} 

<div class="topIcons topIconsHover">    
    <a href="tools.html"><img src="tools16lg.png" /></a>     
</div> 

div.topTextHover:hover { 
    background-color:#555555; 
    color:#ffffff 
} 

<div id="topBrowse" class="topTextHover">  
    <a href="browse.html">Browse</a>      
</div>

來源

2011-11-30 jstacks

顏色屬性只適用於文本元素，而不是divs。所以，你應該class標籤應用到您的href標記是這樣的：

<style type="text/css"> 
.topTextHover:hover { 
    background-color:#555555; 
    color:#ffffff 
} 
</style> 

<div id="topBrowse">  
    <a href="browse.html" class="topTextHover">Browse</a>      
</div>

編輯：

如果你正在尋找定義鏈接本身，和懸停狀態的基類，不喜歡它這樣的：

<style type="text/css"> 
.topTextHover { 
    background-color: transparent; 
    color: #0000ff; 
} 
.topTextHover:hover { 
    background-color: #555555; 
    color: #ffffff; 
} 
</style> 

<div id="topBrowse">  
    <a href="browse.html" class="topTextHover">Browse</a>      
</div>

好運

來源

2011-11-30 05:06:05 Jivago

它似乎仍然不起作用。而且，即使背景顏色也不起作用。 – jstacks

提示：「div.theStyle」表示風格只適用於div，「a.theStyle」表示該風格只適用於錨定標籤。如果您沒有像我那樣指定元素類型（.theStyle，no div。or no a。），則樣式可以應用於不同的元素。 – Jivago

我知道這段代碼在Lynx Viewer中不起作用;請記住在代碼中用「.topTextHover：hover」代替「div.topTextHover：hover」。 – Jivago

錨標記具有默認的文本顏色，它獲得優先級（通常是藍色）。你需要的是明確地定義：

div.topIconsHover:hover { 
    background-color: #555555; 
} 

div.topTextHover:hover { 
    background-color: #555555; 
} 

div.topTextHover:hover a { 
    color: #ffffff 
}

來源

2011-11-30 05:02:07 Godwin

它仍然無法工作。我像你所做的那樣分離了類，而改變後的文本顏色仍然不起作用。我甚至試圖完全採取這種做法，只是讓背景工作......但我徘徊我的鼠標，什麼都沒有。 – jstacks

請試一試我的修正案。 – Godwin

你不應該需要所有這些僞類，但我只是想確保它不是一個跨瀏覽器的問題，或者因爲我自己沒有實際訪問鏈接（實際上它可能只是導致該問題的訪問僞類）。 – Godwin

您應用的樣式到「：懸停文本」而不是鏈接。這應該做的伎倆（未測試）：

div.topIconsHover:hover { 
    background-color:#555555; 
} 

<div class="topIcons topIconsHover">    
    <a href="tools.html"><img src="tools16lg.png" /></a>     
</div> 

div.topTextHover:hover, div.topTextHover:hover a { 
    background-color:#555555; 
    color:#ffffff 
} 

<div id="topBrowse" class="topTextHover">  
    <a href="browse.html">Browse</a>      
</div>

來源

2011-11-30 05:18:45 kustomrtr

有兩個非常簡單的方法來解決這個問題。

首先，如果你沒有錨標記（<a href=''></a>）是在div內的任何高度/寬度要求執行以下操作：

.topTextHover a:hover{ 
    background-color:#555555; 
    color:#ffffff 
} 

<div id="topBrowse" class="topTextHover">  
    <a href="browse.html">Browse</a>      
</div>

如果你有在div內的文本空間要求（也就是你想要的文字進行垂直居中對齊和水平居中），那麼我會做如下說明*這是向後兼容的，但實際上只用CSS3兼容

#BrowseLink:hover { 
    background-color:#555555; 
    color:#ffffff 
} 

<a id="BrowseLink" href="browse.html"> 
    <div id="topBrowse" class="topTextHover">  
    Browse     
    </div> 
</a>

另外值得注意的IE6沒有按」 t喜歡僞c lass懸停在任何非錨定標記之外，因此無法正常工作。這可能適用於其他瀏覽器，但我知道的主要問題是瀏覽器的IE6，這些瀏覽器通常在網站上顯示。

來源

2011-11-30 06:02:06 CBRRacer

CSS不能爲文本div工作

回答

相關問題