Question

未应用悬停规则。当我在firebug中查看时，它根本不会加载规则。

在下面实施悬停的正确方法是什么？\

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

好的，现在我们可以分析一下。

对于你的悬停，你正在使用：

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

但是，在HTML结构中，我们看到apptitle是链接中的一个span，并且没有任何内部，因此该规则将无效。

您可以使用

.apptitle:hover

直接在span标记上获取悬停。这适用于所有主流浏览器，期望IE6和关于IE7的dunno。 IE8 +工作正常。

或者您也可以使用：

a:hover .apptitle {}

这可确保规则仅适用于链接悬停时的跨度。

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

Answer 2

有正确的顺序：link pseudo-class：

a：link {color：＃FF0000} / * unvisited link / a：访问过的{color：＃00FF00} / 访问过的链接 / a：将鼠标悬停在链接 /上的{color：＃FF00FF} / a：有效{color：＃0000FF} / 选择了链接* /

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

= d

Answer 3

如果没有看到标记，我怀疑你将锚的类放在错误的位置试试

a.descrip:hover {
  color: #FF6600}

这适用于像这样的标记

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

您的CSS适用于类似

的内容

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

如果这是标记就像尝试

div.descrip a:hover { ...

css帮助 - 多个规则

3 个答案: