hover显示与隐藏气泡状二维码

最新推荐文章于 2024-02-23 15:09:23 发布

原创

最新推荐文章于 2024-02-23 15:09:23 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#二维码

这个博客展示了一种使用jQuery实现的二维码悬停显示与隐藏效果。当鼠标悬停在特定标记上时，一个带有尖角的气泡状二维码会显示出来，移开鼠标则隐藏。代码中定义了CSS样式来突出显示二维码，并使用JavaScript控制其显示和隐藏状态。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Qrcode</title>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".module span.flag").hover(function() {
					$("#qrcode").show(50);
				}, function() {
					$("#qrcode").hide();
				});
			});
		</script>
		<style>
			/*突出显示气泡二维码*/
			body {
				background-color: #533C3C;
			}

			.module {
				top:20px;
				left: 20px;
				width: 200px;
				height: 200px;
				position: relative;
			}

			/*二维码标记*/
			.module .flag {
				position: absolute;
				left: 0px;
				top: 50%;
				cursor: pointer;
				width: 16px;
				height: 16px;
				background-image: url(qrcode.png);
			    background-repeat: no-repeat;
			    background-size: cover;
			    display: inline-block;
			    margin-right: 10px;
			    vertical-align: middle;
			}

			#qrcode {