ホバーすると、別の DOM 要素の不透明度を (1 に) アニメーション化する DOM 要素があります。物事の z 順序のため、2 番目の要素をネストすることはできませんが、いずれかの DOM 要素の上にいる限り、それらが表示されたままになるような相互作用が必要ですが、いずれかの要素をロールオフすると、2 番目の要素は不透明度をアニメーション化してゼロに戻します。
誰でもこれを行う方法を知っていますか?
ホバーすると、別の DOM 要素の不透明度を (1 に) アニメーション化する DOM 要素があります。物事の z 順序のため、2 番目の要素をネストすることはできませんが、いずれかの DOM 要素の上にいる限り、それらが表示されたままになるような相互作用が必要ですが、いずれかの要素をロールオフすると、2 番目の要素は不透明度をアニメーション化してゼロに戻します。
誰でもこれを行う方法を知っていますか?
jQueryを使用すると、次のようなことができます
var show = false;
$(element1).hover(function()
{
if(!show)
{
show = true;
$(element2).fadeIn();
}
});
$(element2).hover(function()
{
if(!show)
{
$(this).fadeIn();
show = true;
}
};
$(element1, element2).mouseleave(function(){$(element2).fadeOut();});
show 変数を使用した理由は、2 番目の要素が既に表示されている場合にそれをフェードさせたくないからです。異なるセレクターをコンマで区切ることにより、1 つのセット内で複数のセレクターを組み合わせることができます。それがうまくいくことを願っています。