模仿悬停事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模仿悬停事件</title>
		<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div style="float:right;text-align:right;">
			<a href="index.html">首页</a>
			&nbsp;|&nbsp;<a href="index.html" class="main">登录</a>
			&nbsp;|&nbsp;<a href="index.html" class="main">注册</a>
			&nbsp;|&nbsp;<a href="index.html" class="main">找回密码</a>
		</div>
		<script>
			$(document).ready(function(){
				$("a.main").hover(function(){
					window.status="http://www.mrbccd.com";return true;    //设定状态栏文本
					},function(){
						window.status="完成";return true;                 //设定状态栏文本
					
				});
			});
		</script>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,可以使用CSS3中的transition和transform属性来实现旋转弹出菜单效果。下面是一份示例代码: HTML代码: ```html <div class="menu"> <button class="menu-btn">菜单</button> <ul class="menu-list"> <li><a href="#">选项1</a></li> <li><a href="#">选项2</a></li> <li><a href="#">选项3</a></li> <li><a href="#">选项4</a></li> </ul> </div> ``` CSS代码: ```css .menu { position: relative; display: inline-block; } .menu-btn { padding: 10px 20px; border: none; background-color: #333; color: #fff; cursor: pointer; } .menu-list { position: absolute; top: 100%; right: 0; background-color: #fff; border: 1px solid #ccc; padding: 10px; list-style: none; transform: rotateX(-90deg); transform-origin: top; transition: transform 0.3s ease-out; opacity: 0; } .menu:hover .menu-list { transform: rotateX(0deg); opacity: 1; } ``` 解释一下代码: 首先,我们将菜单按钮和菜单内容包含在一个`<div>`元素中,并设置该元素的`position`为`relative`。然后,我们给菜单按钮添加样式,包括背景颜色、颜色、边框等。菜单按钮的样式可以根据自己的需要进行调整。 接下来,我们给菜单内容添加样式。我们将菜单内容的`position`设置为`absolute`,并设置`top`和`right`属性使其显示在菜单按钮的下方。我们还设置了菜单内容的背景颜色、边框、内边距和列表样式,使其看起来像一个标准的下拉菜单。 但是,我们并没有让菜单内容默认显示出来。我们使用了CSS3中的`transform`属性,将菜单内容旋转90度,使其不可见。我们还设置了`transform-origin`属性,将旋转的中心点设置在菜单内容的顶部。 接下来,我们使用了CSS3中的`transition`属性,使菜单内容在显示/隐藏时具有动画效果。当鼠标悬停在菜单按钮上时,我们使用CSS伪类`:hover`,将菜单内容的`transform`属性设置为旋转0度,使其显示出来。同时,我们将菜单内容的`opacity`属性设置为1,使其完全可见。 这样就完成了一个简单的旋转弹出菜单效果。您可以根据需要进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值