css帮助 - 多条规则

悬停规则未被应用。当我在萤火虫中查看时，它根本无法加载规则。？css帮助 - 多条规则

什么是执行以下\

的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 
}

来源

2010-11-03 specked

你可以发布一些html标记吗？ – EvanGWatkins 2010-11-03 17:09:43

第一改写你的代码为简单起见。

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 {}

这确保规则仅适用于链接悬停跨越。

最后一句话：问题出在您的选择器中。希望你喜欢这些解决方案。

来源

2010-11-03 18:20:32 Dave

有正确的顺序为：假链接等级：

a：link {color：＃FF0000}/*未访问链接/ 一个：访问{颜色：＃00FF00}/访问链接/ ：悬停{颜色：＃FF00FF}/鼠标移到链路/ 一个：活性{颜色：＃0000FF}/选择的链路*/

如果您向我们显示标记，也许我们可以更快地帮助您。

= d

来源

2010-11-03 17:20:09 tegritol

记忆伪链接类正确级联顺序的有用助记符是“LoVe-HAte”，L（ink）V（isited）H（over）A（ctive） – ajcw 2010-11-03 17:33:56

没有看到我怀疑你有标记的类在错误的位置锚的尝试

a.descrip:hover { 
    color: #FF6600}

这是类似这样的标记

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

你的CSS就像

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

如果是这样的标记是什么样的尝试

div.descrip a:hover { ...

来源

2010-11-03 17:21:09 Bangline

我有构造#idname a：hover {}工作，所以构造.classname a：hover {}也应该工作。 – 2010-11-03 17:24:57

css帮助 - 多条规则

回答

相关问题