如何在某些页面上设置不同的h4和:hover

Question

所以网站使用文本下划线鼠标悬停横跨网站，但在一个页面上，我必须设置鼠标悬停颜色变化，没有下划线装饰。

<div class="hcolor">
 <a href="#"><h4>Custom Text</h4></a>
</div>

在CSS中，我尝试过：

.hcolor h4 a:hover{
 color: #fff;
 text-decoration:none;
 }

但这样做是因为标准设置仍然会覆盖这些设置，并且链接会不断地加下划线。

Answer 1

试试这个：

.hcolor a:hover h4 {
  color: #fff !important;
  text-decoration:none !important;
}

Answer 2

CSS通常从父元素一直到子元素。css将转到具有.hcolor类的元素，然后转到元素h4，然后在该元素中转到子a超链接，现在当您将鼠标悬停在它上面时。将应用CSS。

但由于没有与此匹配的树，因此您需要更改HTML或CSS。

<div class="hcolor">
 <h4>
  <a href="#">Custom Text</a>
 </h4>
</div>

http://jsfiddle.net/afzaal_ahmad_zeeshan/B9Bt5/1/ (超文本标记语言中的更改)

因此，要么像上面那样更改HTML，要么将CSS更改为：

.hcolor a h4:hover {
  color: #fff;
  text-decoration:none;
}

http://jsfiddle.net/afzaal_ahmad_zeeshan/B9Bt5/ (CSS中的更改)

Answer 3

试试这个：

代码

<div class="hcolor">
<h4> <a href="#">Custom Text</a></h4>
</div>

CSS

h4 a:link {
 text-decoration:none;
 }