изменить класс: перед селектором с jquery для подгоняемого подчеркивания

Question

Я хочу анимировать подчеркивание текста. Это не проблема с css. Однако я хочу использовать другой текст, чтобы вызвать анимацию первого текста. Я уже знаю, что вы не можете использовать: прежде чем в jquery, так как он не является частью DOM. Я видел эти два потока: 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); 
} 

При наведении первый текст, хорошо анимированы. При наведении второго текста я хочу снова оживить первый текст, как если бы первый текст зависал. Есть ли способ сделать это?

Answer 1

Вы можете добавить класс в элемент unoonmouseover на элемент dos.

CSS-код, который я добавил это:

h2.uno.active > a:before { 
    visibility: visible; 
    transform: scaleX(1); 
} 

Вот рабочий пример:

$(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>