CSS Sprites - Jak wyjść przycisk unoszących się w stanie depresji

CSS sprites (przycisk) z trzech różnych stanów:CSS Sprites - Jak wyjść przycisk unoszących się w stanie depresji

standardowa
Hover
Tłoczone (aktywne)

Obecnie " Standardowa praca "," Hover "i" Wciśnięty ". Problem polega na tym, że "Wciśnięty" pozostaje wciśnięty tylko gdy mysz jest wciśnięta. Chciałbym, aby stan "Wciśnięty" lub aktywny był aktywny, dopóki nie zostanie ponownie kliknięty. Jakieś pomysły? Rozwiązanie CSS? rozwiązanie javascript?

Dzięki za pomoc, D

Oto kod:

<html> 

<style type="text/css"> 

    a.button { 
     background-image: url('BUTTON SPRITES IMAGE'); 
     width: 86px; 
     height: 130px; 
     display: block; 
     text-indent: -9999px; 

    } 

    a.micbutton:hover { 
     background-position: 0 -130px; 

    } 

    a.micbutton:active { 
     background-position: 0 -260px; 

    } 

</style> 

<a class="button" href="#" ></a> 

</html>

Źródło

2011-07-25 David J. Phillips

Pozostawienie ': hover' lub': active' włączona po opuszczeniu elementu lub puszczając przycisku myszy nie jest to możliwe z samym CSS. Będziesz musiał dodać zdarzenie click JavaScript, aby zachować styl _active_ i obsługiwać _second_ kliknięcie, aby wyłączyć to ponownie. – andyb

Dzięki wszystkim za pomoc - ogromnie niesamowite. Kończy się to kombinacją nowych klas CSS i javascript. Ten nowy kod pozwala na 3 stany wymienione powyżej (Normalny, Zawiesić, Wciśnięty). Po ponownym kliknięciu stanu "Wciśnięty" przycisk (ikonka) pojawia się z powrotem w normalnym stanie.

Oto ostateczny kod:

<html> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.button').click(function() { 
    $(this).toggleClass('button').toggleClass('button1').toggleClass('active'); 
}); 
}); 

</script> 

<style type="text/css"> 

a.button { 
    background-image: url('BUTTON SPRITES IMAGE'); 
    width: 86px; 
    height: 130px; 
    display: block; 
    text-indent: -9999px; 

} 

a.button:hover { 
    background-position: 0 -130px; 

} 

a.button:active, a.active { 
    background-position: 0 -260px; 

} 

a.button1:active { 
background-position: 0 -260px; 

} 

</style> 

<a class="button" href="#" ></a> 

</html>

Źródło

2011-07-26 08:38:12

, które zadziałało także dla mnie :) dzięki –

żaden prob Marci-man :) –

dodać aktywną klasę:

a.button { 
    background-image: url('BUTTON SPRITES IMAGE'); 
    width: 86px; 
    height: 130px; 
    display: block; 
    text-indent: -9999px; 

} 

a.button:hover { 
    background-position: 0 -130px; 
} 

a.button:active, a.active { 
    background-position: 0 -260px; 
}

wtedy, gdy przycisk jest aktywny, wystarczy dodać klasę:

<a class="button active" href="#" ></a>

Źródło

2011-07-25 22:56:30 AlienWebguy

Dodaj aktywną klasę było poprawne. Korzystanie z funkcji toggleClass on click dodaje aktywną klasę i usuwa zajęcia po drugim kliknięciu. Oto, kim byłeś, po tym jak wierzę.

Fiddle

$(function() { 
    $('.button').click(function() { 
     $(this).toggleClass('active'); 
    });  
});

Źródło

2011-07-25 23:09:54

+1 dla poprawnego rozwiązania i co miałem napisać :-) – andyb

CSS Sprites - Jak wyjść przycisk unoszących się w stanie depresji

Odpowiedz

Powiązane problemy