时间戳

首页 > 解决方案 > 如何将 a:hover CSS 应用于 H2，它位于同一个锚标记内？

css - 如何将 a:hover CSS 应用于 H2，它位于同一个锚标记内？

问题描述

这个问题真的很难说。我希望它足够好。

我有一个标签的H2内部，并且每个标签的行为都有问题。我的客户想要的是除了“视图”这个词之外的所有内容。a:hoverH2

发生的事情是，在我创建 H2 CSS 之后，“视图”和“科罗拉多优惠券的疯狂科学”都变白了:hover，但是当您将鼠标悬停在 上时a，只有“视图”这个词在变化，而不是整个关联。如果您将鼠标悬停在其他词上，则整个链接正在发生变化。

当您将鼠标悬停在它的任何部分上时，我怎样才能更好地对此进行编码，以便将所有内容都anchor更改为？#fff

.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>

标签： csshover

解决方案

只需像这样更新悬停：

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*/

完整代码

.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>

推荐阅读