如何设置不同的h4和a：悬停在某些页面上

Question

因此网站使用鼠标悬停在网站上的文字下划线，但在一个页面上我必须将鼠标悬停设置为仅颜色更改，没有下划线装饰。

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

在CSS中我尝试过：

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

但是这个doest工作，因为标准设置仍然覆盖这些，并且链接不断加下划线。

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更改）

因此，要么将HTML更改为上面的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;
 }

Answer 4

确保您的CSS声明优先于模板中已指定的声明。由于只有一个页面必须包含此更改，请继续并指定最好的CSS。

实施例

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

否则，可能存在具有优先级的模板CSS。使用Inspect Element检查正在应用的CSS规则。

Answer 5

你的CSS错了。尝试：

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

P.S。 为什么在<h4>代码中使用<a>代码？只需使用css

设置<a>样式

P.P.S。 好的，让我更好地解释一下：我的建议是删除<h4>并使用css为<a>提供您想要的样式。 所以，你的HTML代码应该是：

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

在我看来，当你可以用css给出你想要的风格时，在<a>内使用另一个标签是没有意义的。

Answer 6

嗨，

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

此CSS代码将起作用

更新： 你说你没工作您确定您说的对吗？我认为我们不明白问题所在