Posso usare: passa il mouse per attivare un'animazione (o transizione) CSS3 che continua a essere in esecuzione anche quando il mouse non è più in bilico

Sto creando un elenco di collegamenti in cui un contenitore di link si espande al passaggio del mouse (con dettagli, immagine e descrizione). Non ho problemi ad animarlo con transizioni o animazioni CSS.Posso usare: passa il mouse per attivare un'animazione (o transizione) CSS3 che continua a essere in esecuzione anche quando il mouse non è più in bilico

Il problema è che mi piacerebbe che restasse espanso anche dopo che il mouse si è allontanato. E mi piacerebbe farlo senza javascript.

È possibile? Grazie!

fonte

2012-04-10 Jaska

No, non è possibile perché ogni css che verrà applicato al passaggio del mouse (:hover) verrà rimosso al passaggio del mouse e non c'è altro modo per catturare il mouse e uscire.

#animate:hover { 
    /* ex. -webkit- -moz- -ms- -o- */ animation: animation 2s infinite; /* will be directly aborted on mouseout :(*/ 
}

Quindi è necessario utilizzare JavaScript per questo.

fonte

2012-04-10 14:34:14 noob

http://www.impressivewebs.com/css3-transitions-javascript/ Questo articolo ha una demo che mostra come è possibile mantenere l'animazione andando aggiungendo/rimuovendo una classe come necessario. Quello che potresti fare è mantenere la tua transizione attuale :hover in posizione, ma per quelli con JavaScript, applica anche gli stessi stili a una classe pseudoHover o qualcosa del genere.

Poi, con JavaScript (jQuery illustrato di seguito) aggiungere la classe quando si passa sopra l'elemento, esempio molto semplice qui: http://jsfiddle.net/btg5y/

HTML:

<div id="list"> 
<p>Hover over me!</p> 
<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul> 
</div> 
<p>Click anywhere here to remove the hover</p>

JS:

$('#list').hover(function() { 
    $('ul', this).addClass('pseudoHover'); 
}); 
$(document).click(function() { 
    $('#list ul').removeClass('pseudoHover'); 
});

CSS:

ul { 
    background-color: #F00; 
    height: 0; 
    overflow: hidden; 
    transition: height 1s; 
    -webkit-transition: height 1s; 
} 
#list:hover ul, .pseudoHover { 
    height: 50px; 
}

Il codice JavaScript è appena usato per aggiungere e rimuovere una classe come necassario per mantenere lo stato richiesto. Se non si dispone di JavaScript, solo il :hover funzionerà.

Oltre a ciò, non riesco a vedere come lo faresti con solo CSS.

fonte

2012-04-11 08:24:05 cchana

Se è davvero necessario evitare javascript, è possibile aggiungere un ritardo per impedire alla casella espansa di tornare alle dimensioni originali per un periodo di tempo prolungato.

In una nota a parte vale la pena aggiungere un: azione e un: hover per le persone che utilizzano dispositivi touch-screen.

Qui l'ho appena fatto per 3 secondi. Tornerà alla dimensione originale dopo il tempo specificato, ma potrebbe aiutare a seconda di ciò che ti serve.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .div{ 
     height:100px; 
     width:50px; 
     background:red; 
     transition: width 0.5s ease; 
     transition-delay:3s; 
    } 
    .div:hover, .div:action 
    { 
     width:400px; 
     transition: width 0.5s ease; 
    } 
</style> 
</head> 
<body> 

<div class="div"></div> 

</body> 
</html>

Cheers, Mark

fonte

2013-06-06 14:03:05 Mark

Invece di usare: hover si potrebbe fare questo utilizzando la classe :target pseudo.

Dai un'occhiata a questo fiddle

Nota: avrete bisogno di un browser moderno per utilizzare questo metodo.(IE9 +)

Inoltre, un'occhiata a this article che mostra alcuni modi intelligenti per simulare eventi click con i CSS (uno dei quali è il:. Bersaglio classe pseudo

fonte

2013-06-20 09:31:05 Danield

Posso usare: passa il mouse per attivare un'animazione (o transizione) CSS3 che continua a essere in esecuzione anche quando il mouse non è più in bilico

risposta

Problemi correlati