Fügen Sie Inhalt auf Mouseover

Ich mache eine Animation mit CSS und es ist fast fertig.Jetzt möchte ich den Bereich, auf dem ich animierte Elemente haben sollte automatisch sagen "hier schweben". Wie kann ich das mit jquery tun?Fügen Sie Inhalt auf Mouseover

Ich habe meinen Code hier-

<!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 hier- http://jsfiddle.net/stackmanoz/CeVgT/

Quelle

2013-01-22 Manoj

super Animation! –

eine ID muss eindeutig sein, Sie haben viele Elemente mit der gleichen ID (keine Antwort auf Ihr Problem, aber Ihre Markup ist ungültig) – voigtan

Keine der IDs sind im Konflikt mit dieser Animation, aber ich werde im Hinterkopf behalten. Dank dir @voigtan – Manoj

hinzufügen content: "hover here"

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

DEMO

Fügen Sie #D:hover:before{ visibility:hidden } hinzu, um den Text bei Hover auszublenden.

DEMO 2

Quelle

2013-01-22 09:17:16 Sowmya

Auf der Demo-URL "Hover here" bleibt sogar auf Hover, kann es verstecken? –

@sowmya, Dies funktioniert, aber auf Hover-Text "Hier schweben" sollte ich denke, verstecken. Wie würdest du das machen? – Manoj

@ManojKumar Sichtbarkeit: versteckt tut das. Aktualisiert die Antwort – Sowmya

/Fügen Sie diese in Ihrem Hauptbehälter

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

in JavaScript-Teil kann u Hörer hinzufügen

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

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

Quelle

2013-01-22 09:20:03

Ausgezeichnete Hilfe, danke – Manoj

Es funktioniert, aber das ist eine hässliche Lösung. Nehmen Sie eine CSS3-Animation und fügen Sie dann Javascript/Jquery hinzu, nur um einen Show/Hide-on-Hover zu machen, ist ziemlich merkwürdig. – AD7six

@ AD7six, Helfen Sie mir, mehr ausgezeichnete Lösungen zu behandeln, sind Sie willkommen – Manoj

Hoffnung kann dies durch die Verwendung von CSS allein gelöst werden ... Unter dem Code

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

Überprüfen Sie die Ausgabe hier

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

Quelle

2013-01-22 10:08:27 r1webs

Fügen Sie Inhalt auf Mouseover

Antwort

Verwandte Themen