Question

下面的代码试图为href元素设置样式。最初它的绿色但悬停应该变为黄色：

<a class="myclass" href="http://www.google.com">G</a>

.myclassA:link, :visited, :active, :active { 
   color: green;
}, A:hover, :focus { 
   color: yellow;
}

问题是href在悬停时没有改变颜色。我的样式语法不正确吗？

小提琴：http://jsfiddle.net/uzaG9/87/

Answer 1

CSS中存在语法错误。检查这个更新的小提琴：

http://jsfiddle.net/alexcoady/uzaG9/855/

a:link, a:visited, a:active { 
    color: green;
}

a:hover, a:focus { 
    color: yellow;
}

或者，如果您想直接定位该课程：

.myclass:link, .myclass:visited, .myclass:active { 
     color: green;
}

.myclass:hover, .myclass:focus { 
    color: yellow;
}

Answer 2

我认为您的CSS中存在一些错误，包括一些拼写错误

body {
  background: #000;
}
.myclass:link,
.myclass:visited,
.myclass:active {
  color: green;
}
.myclass:hover,
.myclass:focus {
  color: yellow;
}

 <a class="myclass" href="http://www.google.com">Google Me</a>

Answer 3

您的css规则与您的链接不符。由空格分隔的选择器是后代选择器。

.mycss a --> matches any <a> element within an element with classname mycss
a.myclass --> matches <a> elements with classname mycss

示例：

＆＃13;

.wrapper a {
  color: red;
}

a.link {
  color: green;
}

＆＃13;

<div class="wrapper">
  <a href="#">Wrapped link</a>
</div>
<a class="link">Link</a>

＆＃13;

Answer 4

您可以进行更改..

.myclass:link, .myclass:visited, .myclass:active { 
 color: green;
}

.myclass:hover, .myclass:focus { 
color: yellow;
}

悬停时的Css样式未应用

4 个答案: