创建了一个自定义CSS类，想要更改链接悬停颜色，但它不工作 [英] Created a custom CSS class, want to change the link hover color but it isn't working

问题描述

我想弄清楚如何将链接悬停颜色更改为＃666666在一组特定的链接，所以我创建了一个自定义CSS类。但是，效果不工作。我已经尝试了一些东西，例如嵌套在div标签中的类，但我的当前的HTML和CSS如下。我是新的代码，所以任何帮助是赞赏。

 < p style =text-align：center;> 
< a class =supportlinkshref =http://www.sharepointflex.org/pricing-plans/> 
< span style =color：＃3fa9f5; text-align：center; font-size：18px;>实施支持< / span>< / a> < / p> 
 
 .supportlinks：hover {color：＃666666; text-decoration：none;} 
  

解决方案

在 span 上的内联样式，所以如果你想避免使用！important 必须摆脱内联样式。

我也建议将其他内联声明移动到您的CSS，但下面的例子显示最小重构

这是一个 Live Demo ，演示如何将内联样式拉入CSS规则：

  .supportlinks {color：＃3fa9f5;}。supportlinks：hover {color：＃666666; text-decoration：none;}  

 < p style = text-align：center;>< a class =supportlinkshref =http://www.sharepointflex.org/pricing-plans/>< span style =text-align：center; font-size：18px;>实现支持< / span>< / a>< / p>  

JSFiddle版本： https://jsfiddle.net/f8dhtcz6/

I am trying to figure out how to change the link hover color to #666666 on a specific set of links, so I have created a custom CSS class. However, the effect is not working. I have tried a few things, like nesting the class within a div tag, for example, but my current HTML and CSS are as follows. I am VERY new to code so any help is appreciated.

<p style="text-align: center;">
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/">
<span style="color: #3fa9f5; text-align: center; font-size: 18px;">Implementation Support</span></a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</p>

.supportlinks:hover {color:#666666; text-decoration:none;}

解决方案

You're using an inline style on your span, so if you want to avoid the use of !important, which I recommend, you will have to get rid of the inline style.

I would also recommend moving the other inline declarations into your CSS as well, but the following example shows the minimum amount of refactoring to get it to work.

Here is a Live Demo that shows how you would pull the inline style out into a CSS rule:

.supportlinks {color: #3fa9f5;}
.supportlinks:hover {color:#666666; text-decoration:none;}

<p style="text-align: center;">
<a class="supportlinks" href="http://www.sharepointflex.org/pricing-plans/">
<span style="text-align: center; font-size: 18px;">Implementation Support</span></a></p>

JSFiddle Version: https://jsfiddle.net/f8dhtcz6/

这篇关于创建了一个自定义CSS类，想要更改链接悬停颜色，但它不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！