Zniknięcie elementu z pseudoklasą :after przy użyciu :hovera

Question

Cześć, mam taki element - pasek, który podkreśla tekst i  jest stworzony przy użyciu pseudoklasy :after , tak wygląda:

h3:after {
  content: " ";
  width:200px;
  background-color: #d3d3d3;
  margin-top: 5px;
  display: block;
  height: 5px;
}

Moje pytanie brzmi - jak sprawić by zniknął, po najechaniu na niego ( :hover) ?

Answer 1

h3:hover:after { display: none; }

Comments

Ok, ta opcja działa jeśli najeżdżam bezpośrednio na tę linię.

Tylko że ja tę linię mam umieszczoną w divie; czyli:

<div class="box">

<h3>tekst</h3>

</div>

Co zrobić żeby ta linia zniknęła gdy najeżdżam w dowolne miejsce na tym divie ?

Answer 2

Rozwiązanie znalezione:)

.box:hover h3:after { display:none}