7

ホバーすると1つのリンクコンテナが展開するリンクリストを作成しています（詳細、画像、説明付き）。CSSトランジションやアニメーションでアニメーション化するのに問題はありません。

問題は、マウスが離れた後も展開したままにしたいということです。そして、javascriptなしでやりたいです。

それは可能ですか？ありがとう！

4

4 に答える 4

1

http://www.impressivewebs.com/css3-transitions-javascript/この記事には、必要に応じてクラスを追加/削除することでアニメーションを維持する方法を示すデモがあります。あなたができることは:hover、フォールバックとして現在のトランジションを維持することですが、JavaScript を使用している場合は、同じスタイルをクラスpseudoHoverなどに適用することもできます。

次に、JavaScript (以下に示す jQuery) を使用して、要素にカーソルを合わせたときにクラスを追加します。非常に基本的な例は次のとおりです: 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;
}

JavaScript は、必要な状態を維持するために、必要に応じてクラスを追加および削除するために使用されます。JavaScript がない場合は、 のみ:hoverが機能します。

それ以外は、CSS だけでこれを行う方法がわかりません。

于 2012-04-11T08:24:05.723 に答える
1

いいえ、mouseover () に適用されるすべての css は:hovermouseout で削除され、mouseover と out をキャプチャする他の方法がないため、それは不可能です。

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

そのため、JavaScript を使用する必要があります。

于 2012-04-10T14:34:14.087 に答える