我想为文本的下划线设置动画。这不是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);
}
将鼠标悬停在第一个文本上时,它的动画效果很好。将第二个文本悬停时,我想再次为第一个文本设置动画,就像第一个文本悬停一样。有什么办法吗?
最佳答案
您可以在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>
关于jquery - 更改类 :before selector with jquery to animate underscoring,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39576859/