CODEWITHSUNDEEP
htmlcss
SomeAmbigiousUserName
SomeAmbigiousUserName

Reputation: 105

CSS a:hover not working for link containing paragraph

I want the link (when the mouse hovers over it) to have a top border of 1px solid black and a bottom border of 1px solid black.

I tried doing

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

but to no avail. I also tried adding the > and < to see if that worked.

/* 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;
}
<!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>

Upvotes: 0

Views: 438

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

You have p inside a.

Use this:

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

I would recommend you to use span instead of p

Upvotes: 5

Related Questions