Geek Answers Handbook

Add mouse content

I am doing an animation with CSS and it is almost complete. Now I want the area in which I have animated elements, should automatically indicate "point here." How can I do this using jquery?

I have a 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/

+6
source share
3 answers

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

+5
source

Hope this can be solved using only CSS ... Below code

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

Check out the output here

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

+1
source

/ Add this to your main container

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

in javascript part u you can add listeners

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

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

0
source

More articles:


All Articles