HTML 鼠标移到上面下拉条显示，鼠标移开消失的事件怎么写。C#
最新回答
心事过重
2024-06-23 02:05:16
<ul>
<li id="lis" class="lis">
<a id="link" href="#">微博</a>
<ul id="ul1">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
window.onload = function (){
var li = document.getElementById('lis');
var ul = document.getElementById('ul1');
var a = document.getElementById('link');
li.onmouseover = function (){
ul.style.display = 'block';
a.style.background = 'yellow';
};
li.onmouseout = function hide(){
ul.style.display = 'none';
a.style.background = '#f1f1f1';
};
};
</script>
一澜冬雪
2024-06-23 21:04:54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ahover</title>
<style>
html{height:100%;overflow:auto;overflow-y:scroll;}
body,html,div,ul,ol,li,dl,dd,dt,a,p,h1,h2,h3,h4,h5,h6,table,td,tr{color:#6a6a6a;list-style-type:none;margin:0;padding:0;font-size:12px;font-family:Microsoft YaHei,SimSun,SimHei;}
.clearfix:after { content:"\200B"; display:block; height:0; clear:both; } /*终极版清除浮动一*/
.clearfix {*zoom:1;}/*IE/7/6*/
.background-color1 { background-color:#053e83;}
.nav {list-style: none;margin: 0;padding: 0;}
.nav li {float: left;position: relative;}
.nav li a {color: #fff;font: 16px/45px Microsoft YaHei,SimHei,SimSun; display:block; width: 122px;/* padding: 0 25px; margin: 0 15px; */text-align: center;}
.nav li a:hover, .nav li a:hover.on,.nav li a.on,.nav li a.on2,.nav li:hover.on,.nav li ul li a:hover,.nav .t,.nav .t:hover {background-color: #002e66;}
.nav li .nav_sub {display: none;position: absolute;top: 45px;left:0px;width: 122px; z-index:11; background-color:#fff;}
.nav li:hover .nav_sub {display: block;}
.nav li ul li {float:none;display:block;position:relative;line-height:20px;_display:inline; margin-left:0;}
.nav li ul li .s {position:absolute;top:0;left:122px;border-left:1px solid transparent;}
.nav li ul li .s li {float:none;}
.nav li ul li a {color: #000;font: 14px/18px Microsoft YaHei,SimHei,SimSun;display: block;text-align: center; padding:10px 0px; margin: 0;}
.nav li ul li a:hover,.nav .t,.nav .t:hover {background-color: #01296e;color: #fff;}
</style>
</head>
<body>
<div class="nv background-color1">
<div class="cn1100">
<ul class="nav clearfix">
<li><a href="index.html">首 页</a>
<ul class="nav_sub"></ul>
</li>
<li><a href="about.html">关于联盟</a>
<ul class="nav_sub">
<li><a href="about.html">联盟介绍</a></li>
<li><a href="about.html">组织架构</a></li>
<li><a href="about.html">会员章程</a></li>
<li><a href="about.html">联盟愿景</a></li>
</ul>
</li>
<li><a href="rhlc.html">入会流程</a>
<ul class="nav_sub"></ul>
</li>
<li><a href="product.html">联盟会员</a>
<ul class="nav_sub"></ul>
</li>
<li><a href="news.html">联盟资讯</a>
<ul class="nav_sub">
<li><a href="news.html">联盟动态</a></li>
<li><a href="news.html">会员资讯</a></li>
<li><a href="news.html">政务发布</a></li>
</ul>
</li>
<li><a href="about4.html">联盟愿景</a>
<ul class="nav_sub"></ul>
</li>
<li><a href="lmxm.html">联盟项目</a>
<ul class="nav_sub"></ul>
</li>
<li><a href="link.html">合作伙伴</a>
<ul class="nav_sub"></ul>
</li>
<li><a href="contact.html">联系我们</a>
<ul class="nav_sub"></ul>
</li>
</ul>
</div>
</div>
</body>
</html>
著墨染雨君画夕
2024-06-23 18:51:08
$(function(){
$("#aaa").mouseenter(function(){
$("#bbb").attr("style","display:block");
});
$("#aaa").mouseout(function(){
$("#bbb").attr("style","display:none");
});
});<a id="aaa">1234</a>
<div id="bbb" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</div>
用之前导下jQuery的包
薇颜浅笑
2024-06-23 07:04:37
//鼠标移到li上，div元素显示
$("li").onmouseover(function(){
$("div").show();
});
//鼠标移到li上，div元素隐藏
$("li").mouseout(function(){
$("div").hide();
});
宛若晴空
2024-06-23 22:42:41
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.tankuang {
height: 100px;
width: 100px;
background-color: #000000;
display: none;
}
</style>
</head>
<body>
<script>
function block() {
document.getElementsByClassName("tankuang")[0].style.display = "block";
}
function none() {
document.getElementsByClassName("tankuang")[0].style.display = "none";
}
</script>
<div>
<a href="#" onmousemove="block()" onmouseout="none()">悬浮上来</a>
<div class="tankuang"></div>
</div>
</body>
</html>
事件都写好了，div里面的内容换成自己的就好了
热门标签
