親divの上にマウスを置くと、子の要素の後に擬似的に影響します。アンダーラインアニメーション

Question

現在、私はh1上にカーソルを置くことができます。下線が引かれますが、親divにマウスを合わせるとh1の要素の後に疑似をアクティブにすることができますか？

私はh1だけの線幅を維持しようとしています。私が試した他の方法は、divの全幅を取るでしょう。

したがって、h2またはh3にカーソルを置くと、h1で下線がアクティブになります。

これはCSSでのみ可能ですか、それとも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/

Answer 1

あなたが効果はなく、.nav-underline自体にホバー状態に応じてトリガするために、親a.imagerevealにホバー状態にしたいので、あなたは、単にのすべてのインスタンスを置き換えることができますこのセレクタ：

.nav-underline:hover 

...とthi S：サイドノートで

.imagereveal:hover .nav-underline 

は、あなたは、擬似要素のための二重のコロンを使用しなければならない、すなわち::after代わりの:after ... unless you really need backwards compatibility with IE8 and below。

は、プルーフ・オブ・コンセプトは、以下を参照してください、または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>

Answer 2

はい、あなただけの「私はドン親要素

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