Dodaj zawartość na myszy mouseover

Tworzę animację z CSS i prawie skończyłem. Teraz chcę, aby obszar, na którym mam elementy animowane, powinien automatycznie odpowiadać "najechać tutaj". Jak mogę to zrobić z jquery?Dodaj zawartość na myszy mouseover

Mam mój kod tutaj-

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

Źródło

2013-01-22 Manoj

niesamowite animacji! –

Identyfikator musi być unikalny, masz wiele elementów z tym samym identyfikatorem (nie ma żadnej odpowiedzi na twój problem, ale twój znacznik jest nieprawidłowy) – voigtan

Żaden identyfikator nie jest sprzeczny z tą animacją, ale będę o tym pamiętać. Dzięki tobie @voigtan – Manoj

Dodaj content: "hover here"

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

DEMO

Dodaj #D:hover:before{ visibility:hidden }, aby ukryć tekst po najechaniu myszą.

DEMO 2

Źródło

2013-01-22 09:17:16 Sowmya

Na stronie demo "Hover here" pozostaje unoszący się, czy może się ukryć? –

@sowmya, działa, ale po najechaniu na napis "hover here" powinien się ukryć chyba. Jak byś to zrobił? – Manoj

@ManojKumar visibility: hidden does that. Zaktualizowano odpowiedź – Sowmya

/Add to wewnątrz głównego pojemnika

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

w javascript część u można dodać słuchaczom

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

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

Źródło

2013-01-22 09:20:03

Doskonała pomoc, dziękuję – Manoj

Działa, ale to brzydkie rozwiązanie. Wykonywanie animacji css3, a następnie dodawanie do niej javascript/jquery tylko po to, aby pokazać/ukryć przy uniesieniu, jest dość dziwne. – AD7six

@ AD7six, Pomóż mi objąć bardziej doskonałe rozwiązania, zapraszam – Manoj

Nadzieja ten może być rozwiązany za pomocą CSS sam ... poniżej kodu

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

sprawdzić wyjście tutaj

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

Źródło

2013-01-22 10:08:27 r1webs

Dodaj zawartość na myszy mouseover

Odpowiedz

Powiązane problemy