Question

我已经在这里和谷歌上进行了相当多的搜索，但是我在链接上找到问题与我的悬停样式有关。

我将以前用于表单框的内容更改为不仅仅是指向着陆页的链接。我已将文本更改为链接（请参阅下面的html）和基本上发生的是链接是永久的紫色（见图）。

HTML

<section class="get-started">
  <div class="shadow"></div>
  <div class="background"></div>
  <div class="inner">
    <h3><a href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>
    <?php// echo do_shortcode('[form]'); ?>
    <script type="text/javascript">
    //  jQuery(window).ready(function($){
      //  var form = $('form');
        //$('.submit-button').click(function(){
          //form.submit();
      // });
    // });
    </script>
  </div>
</section>

CSS

section.get-started {
  position: relative;
}

.get-started a.view_more {
    display: inline-block;
    color: #dfdfdf;
    transition: color .15s ease;
    font-size: 22px;
    text-align: center;
    text-decoration: none;
  }
  @media(min-width: 1435px){
    .get-started a.view_more {
      display: inline-block;
      padding: 0 0 0 15px;
      vertical-align: middle;
    }
  }
  @media(max-width: 1435px){
    .get-started a.view_more {
      display: block;
      padding: 15px 0;
    }
  }
  .get-started a.view_more:hover {
    color: #FFB547;
  }
  .get-started .view_more span {
    display: block;
    font-size: 50px;
    margin: 0 0 10px 0;
  }

  .get-started div.shadow {
    width: 100%;
    height: 50%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
  }
  .get-started div.background {
    width: 100%;
    height: 50%;
    background-color: #f7f7f7;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .get-started div.inner {
    background-color: #FFB547;
    overflow: visible;
    position: relative;
    z-index: 2;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
  }
    @media(min-width: 900px){
      .get-started div.inner {
        padding: 120px 50px;
        height: 220px;
      }
    }
    @media(max-width: 900px){
      .get-started div.inner {
        padding: 10% 5%;
      }
    }
    .get-started div.inner:before {
      content: '';
      position: absolute;
      right: 100%;
      top: 0px;
      width: 0px;
      height: 0px;
      border-top: 460px solid transparent;
      border-bottom: 0 solid transparent;
      border-right: 200px solid #e5a340;
      z-index: -1;
    }

    .get-started h3 {
      font-weight: 300;
      margin: 0 0 15px 0;
      text-align: center;
      color: white;
    }
      @media(min-width: 500px){
        .get-started h3 {
          font-size: 50px;
        }
      }
      @media(max-width: 500px){
        .get-started h3 {
          font-size: 36px;
        }
      }
    .get-started h4 {
      text-align: center;
      font-weight: 300;
      color: white;
      font-size: 24px;
      margin: 0 0 60px 0;
    }
    .get-started form {
      text-align: center;
    }
      .get-started form input[type="text"],
      .get-started form input[type="email"] {
        background-color: transparent;
        outline: none;
        border: none;
        border-bottom: 2px solid rgba(255,255,255,.6);
        font-size: 24px;
        padding: 0 0 2px 5px;
        color: white;
        vertical-align: middle;
        font-weight: 300;
        border-radius: 0;
      }
        @media(min-width: 1000px){
          .get-started form input[type="text"],
          .get-started form input[type="email"] {
            width: 200px;
            display: inline-block;
            margin: 0 20px 0 0;
          }
            .get-started form input[type="email"] {
              width: 350px;
            }
        }
        @media(max-width: 1000px){
          .get-started form input[type="text"],
          .get-started form input[type="email"] {
            width: 100%;
            max-width: 400px;
            display: block;
            margin: 0 auto 20px auto;
          }
        }
        .get-started form input[type="text"]::placeholder,
        .get-started form input[type="email"]::placeholder {
          color: rgba(255,255,255,.6);
        }
        .get-started form input[type="text"]:-ms-input-placeholder,
        .get-started form input[type="email"]:-ms-input-placeholer {
          color: rgba(255,255,255,.6);
        }
      .get-started form input[type="submit"] {
        display: none;
      }
      .get-started form span.fa {
        color: white;
        font-size: 50px;
        position: relative;
        top: 10px;
        right: 5px;
        cursor: pointer;
        opacity: .6;
        transition: opacity .15s ease;
      }
        .get-started form span.fa:hover {
          opacity: 1;
        }

我尝试将链接的类更改为view_more它更改为下面的图像

<div class="inner">
    <h3><a class="view_more" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>....

但这仍然不是我想要的确切风格，所以我认为改变课程会起作用，对吗？

所以我将类更改为view_more_optin并添加以下CSS：

<div class="inner">
    <h3><a class="view_more_optin" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>....



.get-started a.view_more_optin {
  display: inline-block;
  color: #dfdfdf;
  transition: color .15s ease;
  font-size: 22px;
  text-align: center;
  text-decoration: none;
}
@media(min-width: 1435px){
  .get-started a.view_more_optin {
    display: inline-block;
    padding: 0 0 0 15px;
    vertical-align: middle;
  }
}
@media(max-width: 1435px){
  .get-started a.view_more_optin {
    display: block;
    padding: 15px 0;
  }
}
.get-started a.view_more_optin:hover {
  color: #FFB547;
}
.get-started .view_more_optin span {
  display: block;
  font-size: 50px;
  margin: 0 0 10px 0;
}

但是，我得到了原始图片的结果！

我正在制作的新课程是什么？

Answer 1

看起来你实际上是在问一个基本的问题。你可能在主题中有很多代码，也许在它中有点丢失。

控制链接样式的最佳方法是向其中添加一个类，然后设置该类的样式。下面您可以看到将.contact-link类添加到锚元素，然后设置样式的示例。我希望它有所帮助！

＆＃13;

/* this line is only for this example, ignore it */
body {
  background-color: seagreen;
}

/* add these lines below to the end of your stylehseet */

a.contact-link,
a.contact-link:visited {
  color: white;
}

a.contact-link:hover {
  color: blue;
}

＆＃13;

<section class="get-started">
  <div class="shadow"></div>
  <div class="background"></div>
  <div class="inner">
    <h3><a class="contact-link" href="#">Contact us today to schedule a demo. <span class="fa fa-arrow-circle-right"></span></a></h3>
  </div>
</section>

＆＃13;

链接悬停样式无效

1 个答案: