jquery - マウスオーバーでコンテンツを追加

Question

私は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/

score 5 · Accepted Answer

追加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

score 1 · Accepted Answer

これは、CSS だけを使用して解決できることを願っています... コードの下

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

ここで出力を確認してください

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

score 0 · Accepted Answer

/メインコンテナ内にこれを追加

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

JavaScriptの部分では、リスナーを追加できます

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

デモ: http://jsfiddle.net/CeVgT/7/

jquery - マウスオーバーでコンテンツを追加

3 に答える 3

Related

Reference