How can i apply a:hover CSS to H2, which is inside the same anchor tag?

Question

This was really tough to phrase the question. I hope it's good enough.

I have an H2 inside of an a tag and am having problems with the :hover behavior of each. The H2 wrapping around all except the word "View" is what my client wants.

What is happening, is after the H2 CSS i created, the "View" and the "Mad Science of Colorado Coupon" are both turning white on :hover, but when you hover over the a, only the word "View" is changing, not the entire link. If you hover over the other words, the entire link is changing.

How can i better code this as to have the everything inside the anchor change to #fff when you hover over any part of it?

.coupon-box {
  float: left;
  width: 100%;
  background: none repeat scroll 0 0 #ffff9d;
  text-align: center;
  color: #6c6c6c;
  font-size: 14px;
  border-top: 1px solid #d7d7d7;
  cursor: pointer;
}

.coupon-box:hover {
  background: #ff6138 none repeat scroll 0 0;
  color: #fff;
  transition: all 0.2s ease 0s;
}

a {
  cursor: pointer;
  color: #6c6c6c;
  color: #6c6c6c;
  cursor: pointer;
  float: left;
  padding: 5px 0;
  width: 100%;
  text-decoration: none;
}


/*  h2  */

h2.coupon-wrapper {
  float: none;
  width: auto;
  color: #6c6c6c;
  background-color: transparent;
  font-family: 'Segoe UI';
  padding: 0;
  margin: 0;
  display: inline;
  text-transform: none;
  font-size: 14px;
}


/*Hover for h2 and a */

a:hover,
h2.coupon-wrapper:hover {
  background: #ff6138 none repeat scroll 0 0;
  color: #fff;
  transition: all 0.2s ease 0s;
}

/* HTML */
<div class="coupon-box">
  <table style="width:100%">
    <tbody>
      <tr>
        <td style="height:60px;vertical-align:middle;text-align:center">
          <a href="#">View <h2 class="coupon-wrapper">Mad Science of Colorado Coupon</h2></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

what you really want is to learn about bundling and capturing https://javascript.info/bubbling-and-capturing https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Arye Eidelman, Apr 30 '18 at 00:29

score 2 · Answer 1 · answered Apr 29 '18 at 23:54

Simply update the hover like this:

a:hover, /*Update the content of a on hover on a*/
a:hover h2.coupon-wrapper /*Update the content of h2 on hover on a*/

Full code

.coupon-box {
  float: left;
  width: 100%;
  background: none repeat scroll 0 0 #ffff9d;
  text-align: center;
  color: #6c6c6c;
  font-size: 14px;
  border-top: 1px solid #d7d7d7;
  cursor: pointer;
}

.coupon-box:hover {
  background: #ff6138 none repeat scroll 0 0;
  color: #fff;
  transition: all 0.2s ease 0s;
}

a {
  cursor: pointer;
  color: #6c6c6c;
  color: #6c6c6c;
  cursor: pointer;
  float: left;
  padding: 5px 0;
  width: 100%;
  text-decoration: none;
}


/*  h2  */

h2.coupon-wrapper {
  float: none;
  width: auto;
  color: #6c6c6c;
  background-color: transparent;
  font-family: 'Segoe UI';
  padding: 0;
  margin: 0;
  display: inline;
  text-transform: none;
  font-size: 14px;
}


/*Hover for h2 and a */

a:hover,
a:hover h2.coupon-wrapper {
  background: #ff6138 none repeat scroll 0 0;
  color: #fff;
  transition: all 0.2s ease 0s;
}

<div class="coupon-box">
  <table style="width:100%">
    <tbody>
      <tr>
        <td style="height:60px;vertical-align:middle;text-align:center">
          <a href="#">View <h2 class="coupon-wrapper">Mad Science of Colorado Coupon</h2></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

How can i apply a:hover CSS to H2, which is inside the same anchor tag?

1 Answers1