Krycie na div najechaniu

Question

Do tej pory mam ten kod

http://jsfiddle.net/Nq79H/1/

ale chcę Fadeout obrazu w celu pozostawienia tylko tekst widoczny. Czy muszę zmienić javascript lub napisać nowy css div?

$('.text').hide().removeClass('text').addClass('text-js'); 

$('.thumb').hover(function(){ 
    $(this).find('.text-js').fadeToggle(); 
}); 

Answer 1

... ale chcę Fadeout obrazu w celu pozostawienia tylko tekst widoczny.

Wystarczy dodać .fadeToggle() do elementu img także:

$('img', this).fadeToggle(); 

JSFiddle example.

Answer 2

Jeśli chcesz tekstu fadeIn i Fadeout obrazu, wystarczy dodać jedną linię:

$('.text').hide().removeClass('text').addClass('text-js'); 

$('.thumb').hover(function(){ 
    $(this).find('.text-js').fadeToggle(); 
    $(this).children("img").fadeToggle(); 
}); 

Answer 3

$(this).find('img').fadeToggle(); 

Answer 4

Czy tego szukasz?

$('.thumb').hover(function(){ 
$(this) 
    .find('.text-js') 
     .fadeToggle() 
    .end() 
    .find('img') 
     .fadeToggle(); 
}); 

http://jsfiddle.net/Nq79H/4/

Answer 5

Nie JS lub dodatkowy HTML potrzebne.

http://jsfiddle.net/Nq79H/11

.thumb img { 
    -moz-transition: opacity .8s; 
    -webkit-transition: opacity .8s; 
    transition: opacity .8s; 
} 
.thumb:hover img { 
    opacity: 0; 
} 

Answer 6

Oto rozwiązanie przejścia CSS3:

jsFiddle

CSS

.thumb .text { 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: #999; 
    background: rgba(0, 0, 0, 0.3); 
    text-align: center; 
    -webkit-transition:opacity .5s ease; 
    -moz-transition:opacity .5s ease; 
    transition:opacity .5s ease; 
    opacity:0; 
} 
.thumb:hover .text { 
    opacity:1; 
} 

.thumb img { 
    opacity:1; 
    -webkit-transition:opacity .5s ease; 
    -moz-transition:opacity .5s ease; 
    transition:opacity .5s ease; 
} 
.thumb:hover img { 
    opacity:0; 
} 

Pomoc

Obsługa przejść CSS3 jest teraz całkiem przyzwoita, wszystkie wersje obsługujące najnowsze wersje przeglądarek (Safari, Chrome, Opera, Firefox) obsługują przejścia. Z drugiej strony IE obsługuje go tylko od wersji 10. Przejścia są fajne, ponieważ nie powodują awarii i nagrywania, gdy coś nie obsługuje tego. Nieprzezroczystość elementu nadal będzie się zmieniać, po prostu nie będzie żadnego przejścia.

Referencje

• Caniuse.com transitions