1つのリンクコンテナがホバリングしたときに展開するリンクリストを作成しています（詳細、画像、説明）。私はCSSのトランジションやアニメーションでアニメーションを作成することに問題はありません。マウスをホバリングしなくても実行し続けるCSS3のアニメーション（またはトランジション）をホバーすることができます
問題は、マウスが離れた後でも拡張したままにしておきたいことです。 そして私はjavascriptなしでそれをやりたいと思います。
これは可能ですか？ありがとう！
マウスオーバーで適用されるすべてのCSS（:hover）はマウスアウト時に削除されるため、マウスオーバーやアウトをキャプチャする方法はありません。
#animate:hover {
/* ex. -webkit- -moz- -ms- -o- */ animation: animation 2s infinite; /* will be directly aborted on mouseout :(*/
}
JavaScriptを使用する必要があります。
http://www.impressivewebs.com/css3-transitions-javascript/この記事では、必要に応じてクラスを追加/削除することでアニメーションを維持する方法を示すデモがあります。あなたができることは、あなたの現在の:hoverをフォールバックとして置き換えることですが、JavaScriptを使っている人には同じスタイルをクラスpseudoHoverなどにも適用します。その後
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;
}
JavaScriptは、あなたが必要とする状態を永続させるために、クラスを追加して削除するために使用されます。 JavaScriptをお持ちでない場合は、:hoverのみが動作します。
それ以外は、CSSでこれをどうやってやるのか分かりません。
実際にjavascriptを避ける必要がある場合は、拡張したボックスを元のサイズに戻すのを遅らせることができます。
タッチスクリーンデバイスを使用している人のためには、a：アクションとa：hoverを追加する価値があります。
ここで私は3秒間しました。指定した時間が経過すると元のサイズに戻りますが、必要なものに応じて役立ちます。
<!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>
乾杯、 マーク
の代わりに使用して：あなたは:target疑似クラスを使用してこれを行うことができますホバー。このfiddle
注
チェックアウトは：あなたは、このメソッドを使用するために最新のブラウザが必要です。（IE9 +）
また、CSS（そのうちの一つがあることでクリックイベントをシミュレートするいくつかの巧妙な方法を示しているthis articleを見てみ：ターゲット擬似クラスを