ホームページ > ウェブフロントエンド > htmlチュートリアル > QRコード上にマウスを置くとQRコードがゆっくりと出てきて、マウスがQRコードから離れるとQRコードがゆっくりと下がるという効果がありますが、これを実現する方法を教えてください。 _html/css_WEB-ITnose

QRコード上にマウスを置くとQRコードがゆっくりと出てきて、マウスがQRコードから離れるとQRコードがゆっくりと下がるという効果がありますが、これを実現する方法を教えてください。 _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 08:58:56
オリジナル
1254 人が閲覧しました

以下にコードとレンダリングを添付します。CSS3 を使用する必要があります。



<div class="Apply" ><div class="one" onmouseover="MM_over(this)" onmouseout="MM_out(this)"><div style="background-color:#fff;width: 170px;height: 180px;position: relative;top: 100px;margin: auto;"><img src="./images/hotel.png"    style="max-width: 130px;padding-bottom: 10px;margin-left: 20px;margin-top: 10px;"/><!-- 二维码 --><span style="font-size: 10px;width: 160px;margin-left: 45px;">扫描了解详情</span></div><div id="one1" style="background-color:black;width: 200px;height: 50px;margin-top:100px;position: absolute;border-radius: 0px 0px 20px 20px;"></div><span class="icon-ys01" style="top: 110px;width: 120px;font-size: 30px;margin-left: 85px;position: relative;"></span></div></div>
ログイン後にコピー



ディスカッションへの返信 (解決策)

css3
ご存知ですが、まだ検索はしていません

携帯電話で使用している場合は、インタラクション デザインが問題がある場合、携帯電話のマウスはどこにありますか?
PC を使用している場合は、jquery の animate メソッドを使用して QR コードの位置を変更するだけです。

携帯電話で使用している場合、インタラクションのデザインに問題があります。携帯電話のマウスはどこにありますか?
PC を使用している場合は、jquery の animate メソッドを使用して QR コードの位置を変更するだけです。

  $(document).ready(function()		  {		  $(".one").hover(function(){		    $(".erweima").animate({top:"100px"});		 });});
ログイン後にコピー
ここはマウスが置かれている場所です。放置した後はどうすればよいですか?

$(".one").hover(function(e){   e.type == "mouseleave", //是否是离开事件}
ログイン後にコピー
ログイン後にコピー


$(".one").mouseenter{}$(".one").mouseleave{}
ログイン後にコピー
ログイン後にコピー

$(".one").hover(function(e){   e.type == "mouseleave", //是否是离开事件}
ログイン後にコピー
ログイン後にコピー

も使用できます
$(".one").mouseenter{}$(".one").mouseleave{}
ログイン後にコピー
ログイン後にコピー

も使用できますもう一度教えてください 画像にオーバーフロー部分があり、オーバーフロー属性が使いにくいです。


オーバーフローを解決する方法は、間違いなく最良かつ最も簡単な解決策です。使いにくい場合は、1) 親要素のスタイルでオーバーフローを宣言する必要がある、2) 親要素のサイズに注意する、の 2 点に注意してください。
DOM 構造には十分注意してください。
他の方法もありますが、とても面倒です。


オーバーフローは間違いなく最良かつ最も簡単な解決策です。使いにくい場合は、1) 親要素のスタイルでオーバーフローを宣言する必要がある、2) 親要素のサイズに注意する、の 2 点に注意してください。
DOM 構造には十分注意してください。
他の方法もありますが、とても面倒です。 ありがとう、問題は解決しました
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート