6

我正在用 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>

演示在这里-http ://jsfiddle.net/stackmanoz/CeVgT/

4

3 回答 3

5

添加content: "hover here"

#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 }以隐藏悬停时的文本。

演示 2

于 2013-01-22T09:17:16.803 回答
1

希望这可以通过单独使用CSS来解决......下面的代码

#D:before{content:"Hover here";}
#D:hover::after {content:"";}
#D:hover::before {content:"";}

在此处检查输出

http://jsfiddle.net/r1webs/C6QTn/

于 2013-01-22T10:08:27.163 回答
0

/在你的主容器中添加这个

<div id='hover'>Hover here<div>

在javascript部分你可以添加监听器

$(document).ready(function() {
    $('#D').hover(function(){ $('#hover').hide()}, function(){ $('#hover').show()});
});

演示：http: //jsfiddle.net/CeVgT/7/

于 2013-01-22T09:20:03.567 回答