Как я могу применить: hover CSS к H2, который находится внутри того же тега привязки? - PullRequest
Новая
       5

Как я могу применить: hover CSS к H2, который находится внутри того же тега привязки?

0 голосов
/ 30 апреля 2018

Это было действительно сложно сформулировать вопрос. Я надеюсь, что это достаточно хорошо.

У меня есть H2 внутри тега a, и у меня проблемы с поведением :hover каждого из них. H2, охватывающий все , за исключением , слова "View" - это то, что хочет мой клиент.

То, что происходит, происходит после того, как я создал 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>

1 Ответ

0 голосов
/ 30 апреля 2018

Просто обновите курсор мыши так: 

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