Menu
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/
883
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
186
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/
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
