6

I am making an animation with CSS and it's almost done.Now i want that area on which i have animated elements should say automatically "hover here". How can i do this with jquery?

I have my code here-

<!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>

Demo here- http://jsfiddle.net/stackmanoz/CeVgT/

2
  • 2
    an ID must be unique, you have many elements with the same ID (not any answer to your problem, but your markup is invalid)
    – voigtan
    Jan 22, 2013 at 9:16
  • None of ids are conflicted with this animation but i'll keep in mind. Thanks to you @voigtan
    – Manoz
    Jan 22, 2013 at 9:19

3 Answers 3

5

Add content: "hover here"

#D {
  background: #fff;
  line-height: 180px;
  position: justify;
  border:1px dotted #ccc; text-align:center
}
#D:before {
content:"Hover here"; 
}

DEMO

Add #D:hover:before{ visibility:hidden } to hide the text on hover.

DEMO 2

3
  • On the demo url "Hover here" stays even on hover, can it hide? Jan 22, 2013 at 9:19
  • @sowmya ,This is working but on hover text "hover here" should hide i guess. How would you do that?
    – Manoz
    Jan 22, 2013 at 9:22
  • @ManojKumar visibility:hidden does that. Updated the answer
    – Sowmya
    Jan 22, 2013 at 9:24
1

Hope this can be solved by using CSS alone... Below the code

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

Check the output here

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

0

/Add this inside your main container

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

in javascript part u can add listeners

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

DEMO: http://jsfiddle.net/CeVgT/7/

3
  • 2
    It works but that's an ugly solution. Taking a css3 animation and then adding javascript/jquery to it just to do a show/hide-on-hover is quite odd.
    – AD7six
    Jan 22, 2013 at 9:31
  • @AD7six, Help me covering more excellent solutions, you are welcome
    – Manoz
    Jan 22, 2013 at 9:39
  • Well, i know its odd but that is whats being asked in the question Jan 22, 2013 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.