Question

我正在使用此codepen中的CSS在悬停时创建一个很酷的超链接下划线效果。但是当我去实现它时，我仍然可以看到文本修饰应用于超链接，即使我已将无设置为 a 标记。有什么问题？

编辑：我希望将超酷超链接效果应用于仅查看战斗世界链接。

CSS

section.custom_view h2, section.custom_view h3, section.custom_view h4 {
  color: #666;
  font-size: 150%;
  padding-top: 1.25em;
  margin-right: 0.625em; }

section.custom_view ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; }

section.custom_view li {
  float: left;
  margin-bottom: 0.625em; }

section.custom_view li a {
  display: inline-block;
  font-size: 150%;
  padding-top: 1.25em;
  text-decoration: none; }

section.custom_view li a, section.custom_view li a:visited, section.custom_view li a:hover, section.custom_view li a:active {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
  transition: 0.5s color ease;
  text-decoration: none; }

section.custom_view li a:hover {
  color: #990000; }

section.custom_view li a.before:before, section.custom_view li a.after:after {
  content: "";
  transition: 0.5s all ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute; }

section.custom_view li a.after:after {
  bottom: -0.25em; }

section.custom_view li a.before:before, section.custom_view li a.after:after {
  height: 5px;
  height: 0.35rem;
  width: 0;
  background: #990000; }

section.custom_view li a.third:after, section.custom_view li a.sixth:before, section.custom_view li a.sixth:after {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

section.custom_view li a.before:hover:before, section.custom_view li a.after:hover:after {
  width: 100%; }

HTML

<body>
   <! -- some more HTML -->
<section class='content'>
    <ul class='breadcrumbs'>
      <li><a href="/">Home</a></li>
      <li>Searching for Worlds</li>
    </ul>
    <section class='custom_view'>
      <ul>
        <li>
          <h2>Viewing All Trials</h2>
        </li>
        <li>
          <a class="third after" href="/search?limit=15&amp;locale=en&amp;offset=0&amp;recruiting_status=Recruiting&amp;search_header_menu_left=Viewing+All+Battle+Worlds&amp;search_header_menu_right=View+All+Worlds&amp;search_terms=Mars&amp;zip_code=90033">View Battle Worlds Only</a>
        </li>
      </ul>
    </section>
   <! -- some more HTML -->
</section>
</body>

Answer 1

您的CSS正在应用于new HelloController()类的section元素，因为它在所有CSS选择器中都以这种方式声明：

custom_view

但是，HTML中的section.custom_view类别为section：

content

要使这项工作，您需要匹配该类。

对于<section class='content'>

的所有实例，将CSS中的类更改为content

或

将HTML中custom_view的班级更改为section

为什么这个CSS没有禁用超链接中的文本修饰？

1 个答案: