我正在用 CSS 制作一个动画，它几乎完成了。现在我希望我有动画元素的那个区域应该自动说“悬停在这里”。 我怎样才能用 jquery 做到这一点？
我的代码在这里-
<!DOCTYPE html>
<html>
<head>
<style>
#D {
background: #fff;
height: 180px;
position: justify;
border:1px dotted #ccc;
}
#S{
font: 5em 'Bree Serif', Helvetica, sans-serif;
margin: 50px;
opacity: 0;
text-transform: uppercase;
position:absolute;
}
#S:nth-child(5) {
-webkit-transition: all 2s ease-in-out ;
-moz-transition: all 2s ease-in-out ;
-o-transition: all 2s ease-in-out ;
-ms-transition: all 2s ease-in-out ;
transition: all 2s ease-in-out ;
}
#S:nth-child(4) {
-webkit-transition: all 1s ease ;
-moz-transition: all 1s ease ;
-o-transition: all 1s ease ;
-ms-transition: all 1s ease ;
transition: all 1s ease ;
}
#S:nth-child(3) {
-webkit-transition: all 2s ease ;
-moz-transition: all 0.1s ease 0s ;
-o-transition: all 0.1s ease ;
-ms-transition: all 0.1s ease ;
transition: all 1s ease 0s;
}
#S:nth-child(2) {
-webkit-transition: all 1s ease ;
-moz-transition: all 0.1s ease ;
-o-transition: all 0.1s ease ;
-ms-transition: all 0.1s ease ;
transition: all 1s ease ;
}
#S:nth-child(1) {
-webkit-transition: all 1s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 1s ease 0s;
}
#D:hover #S:nth-child(1) {
opacity: 1;
left: 50px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(2) {
opacity: 1;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#D:hover #S:nth-child(3) {
opacity: 1;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
#D:hover #S:nth-child(4) {
opacity: 1;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
#D:hover #S:nth-child(5) {
opacity: 1;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#D:hover #S:nth-child(6) {
opacity: 1;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
#D:hover #S:nth-child(7) {
opacity: 1;
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
#D:hover #S:nth-child(8) {
opacity: 1;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
#S:nth-child(6)
{
-webkit-transition: all 1s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 1s ease 0s;
}
#S:nth-child(7)
{
-webkit-transition: all 1s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 1s ease 0s;
}
#S:nth-child(8)
{
-webkit-transition: all 1s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 1s ease 0s;
font-size:10em;
margin-top:4px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(2) {
left: 120px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(3) {
left: 175px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(4) {
left: 260px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(5) {
left: 313px;
margin-top:20px;
font-size:8em;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(6)
{left:390px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(7)
{
left:450px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
#D:hover #S:nth-child(8)
{
left:500px;
color:#ccc;
text-shadow: 1px 4px 6px black;
}
</style>
</head>
<body>
<div id="D">
<span id="S">c</span><span id="S">s</span><span id="S">s</span><span id="S">H</span><span id="S" >()</span><span id="S">V</span><span id="S">E</span><span id="S">R</span>
</div>
</body>
</html>
最佳答案
添加内容:“悬停在这里”
#D {
background: #fff;
line-height: 180px;
position: justify;
border:1px dotted #ccc; text-align:center
}
#D:before {
content:"Hover here";
}
添加 #D:hover:before{ visibility:hidden } 以隐藏悬停时的文本。
关于jquery - 在鼠标悬停时添加内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14454989/