更改class :使用jquery在选择器之前设置下划线动画
更改class :使用jquery在选择器之前设置下划线动画
提问于 2016-09-19 23:30:15
我想对文本的下划线进行动画处理。这对于css来说是没有问题的。但是，我想使用另一个文本来触发第一个文本的动画。我已经知道不能在jquery中使用:before，因为它不是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);
}当悬停第一个文本时，它的动画效果很好。当悬停第二个文本时，我希望再次动画第一个文本，就像第一个文本被悬停一样。有没有办法做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-20 03:40:31
您可以向dos元素上的uno元素onmouseover添加一个类。
我添加的css是：
h2.uno.active > a:before {
visibility: visible;
transform: scaleX(1);
}下面是一个工作示例：
$(function() {
$('.dos a').on('mouseover', function() {
$('.uno').addClass('active')
}).on('mouseout', function() {
$('.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39576859
复制相关文章
相似问题
腾讯云开发者
