change class : jquery로 선택 자 앞에 밑줄을 붙이십시오.

Question

텍스트의 밑줄을 움직이려합니다. 이것은 CSS에서 아무런 문제가되지 않습니다. 그러나 다른 텍스트를 사용하여 첫 번째 텍스트의 애니메이션을 트리거하고 싶습니다. DOM의 일부가 아닌 jquery에서 전에는 사용할 수 없다는 것을 이미 알고 있습니다. 이 두 스레드를 보았습니다 : 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

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>