css幫助 - 多條規則

Question

懸停規則未被應用。當我在螢火蟲中查看時，它根本無法加載規則。 ？

什麼是執行以下\

的HTML標記懸停正確的方法是：

<li class="ui-menu-item" role="menuitem"><a target="_blank" title="Click here" href="http://........" class="ui-corner-all" tabindex="-1"> 
<span class="apptitle">Some Text here</span> 
<br> 
<span class="descrip">Some Description</span> 
</a> 
<a target="_blank" href="http://......" class="ui-corner-all" tabindex="-1"><img src="someimg.gif">Please click here for support</a>  
<hr align="center" width="80%"></li> 

感謝

* html .ui-autocomplete { 
width: 400px; 
height: 200px; 
} 
.apptitle, .apptitle a, .apptitle a:active, .apptitle a:visited { 
color: #0080FF; 
font-weight: bold; 

} 
.apptitle a:hover{ 
text-decoration: underline; 
} 
.title { 
text-align: left; 
} 
.descrip, .descrip a, .descrip a:active, .descrip a:visited { 
padding-left: 10px; 
padding-top: 10px; 
text-align: left; 
color: #000000 
} 
.descrip a:hover{ 
color: #FF6600 
} 

Answer 1

第一改寫你的代碼爲簡單起見。

HTML

<li class="ui-menu-item" role="menuitem"> 
    <a href="xxx" class="ui-corner-all"> 
     <span class="apptitle">Some Text here</span> 
     <br> 
     <span class="descrip">Some Description</span> 
    </a> 
    <a href="yyy" class="ui-corner-all" tabindex="-1"> 
     <img src="someimg.gif"> 
     Please click here for support 
    </a> 
    <hr align="center" width="80%"> 
</li> 

CSS

* html .ui-autocomplete {width: 400px; height: 200px;} 

.apptitle, .apptitle a, .apptitle a:active, .apptitle a:visited { 
color: #0080FF;font-weight: bold; 
} 
.apptitle a:hover {text-decoration: underline;} 

.title {text-align: left;} 

.descrip, .descrip a, .descrip a:active, .descrip a:visited { 
padding: 10px 0px 0px 10px; text-align: left; color: #000000 
} 

.descrip a:hover {color: #FF6600;} 

OK，現在我們可以分析它。

爲了您的懸停，您使用的是：

.apptitle a:hover {} 
.descrip a:hover {} 

然而，在HTML結構中，我們看到的是apptitle一個鏈接內的跨度，並沒有任何在它裏面，因此該規則將無法正常工作。

您可以直接使用

.apptitle:hover 

，取上跨度標籤懸停。這適用於所有主流瀏覽器，期望IE6，不知道IE7。 IE8 +正常工作。

或者你也可以使用：

a:hover .apptitle {} 

這確保規則僅適用於鏈接懸停跨越。

最後一句話：問題出在您的選擇器中。希望你喜歡這些解決方案。

Answer 2

有正確的順序爲：假鏈接等級：

a：link {color：＃FF0000}/*未訪問鏈​​接/ 一個：訪問{顏色：＃00FF00}/訪問鏈接/ ：懸停{顏色：＃FF00FF}/鼠標移到鏈路/ 一個：活性{顏色：＃0000FF}/選擇的鏈路*/

如果您向我們顯示標記，也許我們可以更快地幫助您。

= d

Answer 3

沒有看到我懷疑你有標記的類在錯誤的位置錨的嘗試

a.descrip:hover { 
    color: #FF6600} 

這是類似這樣的標記

<a href="#" class="descrip"> 

你的CSS就像

<div class="descrip"><a href="#"> 

如果是這樣的標記是什麼樣的嘗試

div.descrip a:hover { ...