Question

这句话很难说。我希望它足够好。

我在H2代码中有一个a，并且每个代码的:hover行为都有问题。 H2包围所有，除了单词＆＃34;查看＆＃34;是我的客户想要的。

发生了什么，是在我创建的H2 CSS之后，＆＃34; View＆＃34;以及科罗拉多州科学院的疯狂科学券＃34;在:hover上都变为白色，但当您将鼠标悬停在a上时，只会显示＆＃34;查看＆＃34;正在改变，而不是整个环节。如果将鼠标悬停在其他单词上，则整个链接都在变化。

如果将anchor内的所有内容更改为#fff，当您将鼠标悬停在其中的任何部分时，我怎样才能更好地对其进行编码？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需像这样更新悬停：

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

完整代码

＆＃13;

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

＆＃13;

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

＆＃13;

我怎样才能应用：将CSS悬停在H2上，这是在同一个锚标签内？

1 个答案: