html - 如何设置不同的h4和a :hover on certain pages

Question

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

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

在 CSS 中我试过:

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

但这确实有效，因为标准设置仍然会覆盖这些设置并且链接会不断加下划线。

Answer 1

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，要么将您的 CSS 更改为:

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

http://jsfiddle.net/afzaal_ahmad_zeeshan/B9Bt5/ (CSS 的变化)