変更クラス：アンダースコアをアニメーション化するjqueryを使用するセレクタの前に

Question

テキストの下線をアニメーション化したいです。これはCSSでは問題ありません。しかし、最初のテキストのアニメーションをトリガーするために別のテキストを使用したいと思います。私はすでに、あなたがDOMの一部ではないので、jqueryの前では使用できないことを知っています。私はこれらの2つのスレッドを見てきました：Access the css ":after" selector with jQueryとSelecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

しかし、私は解決策を見つけることができませんでした。ここでは、コードです：https://jsfiddle.net/rbsxufsc/4/

HTML：

<h2 class='uno'> 
    <a href=''>:hover, please</a> 
</h2> 
<h2 class='dos'> 
    <a href=''>Animate above text</a> 
</h2> 

CSS：

h2 > a:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 3px; 
    bottom: 0; 
    left: 0; 
    background: #9CF5A6; 
    visibility: hidden; 
    border-radius: 5px; 
    transform: scaleX(0); 
    transition: .25s linear; 
} 
h2.uno > a:hover:before, 
h2.uno > a:focus:before { 
    visibility: visible; 
    transform: scaleX(1); 
} 

最初のテキストをホバリング、それがうまくアニメーションされています。 2番目のテキストをホバリングすると、最初のテキストがあたかもあたかもあたかもあたかも動かされたかのように、最初のテキストを再びアニメーション化したい。それを行う方法はありますか？

Answer 1

dos要素のuno要素onmouseoverにクラスを追加できます。

私は追加CSSは次のとおりです。

$(function() { 
 
\t $('.dos a').on('mouseover', function() { 
 
    \t $('.uno').addClass('active') 
 
    }).on('mouseout', function() { 
 
    \t $('.uno').removeClass('active') 
 
    }) 
 
})

@import url(http://fonts.googleapis.com/css?family=Quando); 
 
*, *:after, *:before { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 
* {margin:0;padding:0;border:0 none;position: relative; outline: none; 
 
} 
 
html, body { 
 
    background: #004050; 
 
    font-family: Quando; 
 
    font-weight: 300; 
 
    width: 100%; 
 
} 
 
h2 { 
 
    background: #0D757D; 
 
    width: 100%; 
 
    min-height: 200px; 
 
    line-height: 200px; 
 
    font-size: 3rem; 
 
    font-weight: normal; 
 
    text-align: center; 
 
    color: rgba(0,0,0,.4); 
 
    margin: 3rem auto 0; 
 
} 
 
.dos {background: #ff5e33;} 
 

 
h2 > a, h3 > a { 
 
    text-decoration: none; 
 
    color: rgba(0,0,0,.4); 
 
    z-index: 1; 
 
} 
 

 
h2 > a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 3px; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: #9CF5A6; 
 
    visibility: hidden; 
 
    border-radius: 5px; 
 
    transform: scaleX(0); 
 
    transition: .25s linear; 
 
} 
 
h2.uno > a:hover:before, 
 
h2.uno > a:focus:before, 
 
h2.uno.active > a:before { 
 
    visibility: visible; 
 
    transform: scaleX(1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2 class='uno'> 
 
    <a href=''>:hover, please</a> 
 
</h2> 
 

 
<h2 class='dos'> 
 
    <a href=''>Animate above text</a> 
 
</h2>