rihooggepsits
New Member
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-\[code\]<!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>\[/code\]Demo here-http://jsfiddle.net/stackmanoz/CeVgT/