Hover over parent div to affect pseudo after elements of child. Underline animation

Question

Currently I can hover over h1 and it will be underlined, but I want to know if I hover over the parent div can I activate the pseudo after elements of h1?

I am trying to preserve the line width to h1 only. Other methods I've tried will take the full width of the div.

So when hovering over h2 or h3, the underline becomes active on h1.

Is this do-able in CSS only or do I need to use Javascript?

.nav-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-underline:before, .nav-underline:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  top: 45%;
  margin-top: -0.5px;
  background: #000;

}

.nav-underline:hover {
    letter-spacing: 4px;
    transition: .35s;
}
.nav-underline:before {
  left: -2.5px;
}
.nav-underline:after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-underline:hover:before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-underline:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
   <div class="nav-underline"><h1>Test</h1></div>
   <h2>Description</h2>
   <h3>Detail</h3>
</a>

https://jsfiddle.net/jvo8wo65/

I don't get your question: you are already binding the `:hover` pseudo-class to the parent div, so hovering over the parent div is indeed triggering the strike-through animation. — Terry, Oct 25 '17 at 14:24
I want to hover over the a class image reveal, or h2 or h3 and activate the underline/strikethrough on h1. — databot, Oct 25 '17 at 14:26
Then just use `.imagereveal:hover .nav-underline` instead of `.nav-underline:hover`. — Terry, Oct 25 '17 at 14:28
The problem with this is if the h3 detail section becomes longer then it will extend to the full width of that. I only want it strike through h1. — databot, Oct 25 '17 at 14:32
Did you even try my suggestion ;) https://jsfiddle.net/teddyrised/jvo8wo65/4/ — Terry, Oct 25 '17 at 14:32
Sorry I didn't read it properly! The moment I hit enter I realised my mistake! Thanks — databot, Oct 25 '17 at 14:33
Glad it helped :) posted my suggestions as answer with working code snippet. — Terry, Oct 25 '17 at 14:34

Terry · Accepted Answer · 2017-10-25T14:39:08.637

Since you want the hover state on the parent a.imagereveal to trigger the effect instead of depending on the hover state on .nav-underline itself, you can simply replace all instances of this selector:

.nav-underline:hover

...with this:

.imagereveal:hover .nav-underline

On a side note, you should be using double colons for pseudo-elements, i.e. ::after instead of :after... unless you really need backwards compatibility with IE8 and below.

See proof-of-concept below, or fixed JSfiddle:

.nav-underline {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.nav-underline::before, .nav-underline::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  top: 45%;
  margin-top: -0.5px;
  background: #000;

}

.imagereveal:hover .nav-underline {
    letter-spacing: 4px;
    transition: .35s;
}
.nav-underline::before {
  left: -2.5px;
}
.nav-underline::after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.imagereveal:hover .nav-underline::before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.imagereveal:hover .nav-underline::after {
  background: transparent;
  width: 100%;
  transition: 0s;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<a class="imagereveal" href="#" rel="image goes here">
   <div class="nav-underline"><h1>Test</h1></div>
   <h2>Description</h2>
   <h3>Detail</h3>
</a>

Thanks and for the formatting tip. Gave me a bit more of an understanding of how pseudo elements work. — databot, Oct 25 '17 at 14:37
@databot Sure. However, if you intend to support IE8 and below, stick to single colons ;) https://stackoverflow.com/questions/10181729/should-i-use-single-or-double-colon-notation-for-pseudo-elements — Terry, Oct 25 '17 at 14:39

score 1 · Answer 2 · answered Oct 25 '17 at 14:33

yes, you just have to move the hover to the parent element

.imagereveal:hover .nav-underline::before{
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.imagereveal:hover .nav-underline::after{
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

Hover over parent div to affect pseudo after elements of child. Underline animation

2 Answers2