Question

我刚刚开始在网站上工作，我从页脚开始。

我希望链接（当鼠标悬停在它上面时）的顶部边框为1px纯黑色，底部边框为1px纯黑色。

我试过

#footer a.footer_link:hover{
    color:orange;
 }

但无济于事。我也试过添加＆gt;和＆lt;看看是否有效。

这是我的HTML：

<!DOCTYPE html>
<html>
    <head>
       <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
       <title></title>
    </head>
    <body>
     <!-- header for: ALL PAGES -->
      <header id="header">

      </header>
      <!-- end header for: ALL PAGES -->

      <!-- navigation bar for: ALL PAGES -->
      <nav>

      </nav>
      <!-- end navigation bar for: ALL PAGES -->

      <!-- paragraph for: THIS PAGE ONLY -->
      <section id="welcome_p">



      </section>
      <!-- end paragraph for: THIS PAGE ONLY -->

      <!-- images for: THIS PAGE ONLY -->
      <section id="plan_options">


      </section>
      <!-- end images for: THIS PAGE ONLY -->

      <!-- footer for: ALL PAGES -->

      <footer id="footer">
      <div id="left_side_footer">
         <h4 class="footer_heading">About</h4>

          <a href="#" class="footer_link">
            <p class="footer_paragraph">Get to Know John</p>
          </a>

          <a href="#" class="footer_link">
            <p class="footer_paragraph">Moon Lit Disco's</p>
          </a>

      </div>

       <div id="middle_of_footer">
         <h4 class="footer_heading">Terms and Policies</h4>

           <a href="#" class="footer_link">
             <p class="footer_paragraph">Cookie Policy</p>
           </a>

           <a href="#" class="footer_link">
             <p class="footer_paragraph">Terms and Conditions</p>
           </a>

           <a href="#" class="footer_link">
             <p class="footer_paragraph">Privacy Policy</p>
           </a>

           <a href="#" class="footer_link">
             <p class="footer_paragraph">Copyright and Trademark</p>
           </a>

      </div>


      <div id="right_side_footer">
        <h4 class="footer_heading">Website</h4>
          <a href="#" class="footer_link">
            <p class="footer_paragraph">Feedback</p>
          </a>
      </div>

      <div id="copyright">
        <p class="legal_paragraph">Logo / site design: <a href="#">Trey Taylor</a> and <a href="#">Charlie Wubs</a></p>
        <p class="legal_paragraph">&copy2014 Moon Lit Disco's</p>
        <p class="legal_paragraph">Version:2014.1.0</p>
      </div>

   </footer>
  <!-- end footer for: ALL PAGES -->
</body>
</html>

和我的CSS：

/* SECTIONS */




/* CLASSES */

.legal_paragraph{
   font-family:"Helvetica", "Arial", sans-serif;
   text-align:right;
   font-size:10px;
   color:black;
   padding:1px;
}

.footer_paragraph{
  font-family:"Helvetica", "Arial", sans-serif;
  font-size:1em;
  color:black;
}

.footer_link{
  text-decoration: none;
}

#footer a.footer_link:hover{
  color:orange;
}

任何帮助将不胜感激！

Answer 1

p内有a。

使用此：

#footer a.footer_link:hover p{
   color:orange;
}

我建议您使用span代替p

CSS a：悬停不起作用

1 个答案: