js鼠标点击事件出现图片
发布网友
发布时间：2022-04-23 18:09
共2个回答
热心网友
时间：2023-10-12 08:42
<html>
<head>
<meta charset="UTF-8" />
<title>last.html</title>
<style>
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.lis {
width: 200px;
height: 30px;
border: 1px solid #333;
position: relative;
}
.link {
height: 30px;
line-height: 30px;
text-align: center;
display: block;
}
.lis ul {
width: 240px;
height: 124px;
display: none;
overflow: hidden;
border: 1px solid #333;
background: yellow;
position: absolute;
top: 30px;
left: -1px;
line-height: 24px;
opacity: 1;
transition: 0.3s;
}
.lis ul li {
text-indent: 10px;
border-bottom: 1px solid #333;
}
</style>
<script>
window.onload = function ()
{
var lis = document.getElementById ('lis');
var ul = document.getElementById ('ul1');
var ul_lis = ul.getElementsByTagName ('li');
lis.onmouseover = function ()
{
if (parseFloat (ul.style.height) <= 0)
{
ul.style.height = '124px';
for ( var i = 0; i < ul_lis.length; i++)
{
ul_lis[i].style.display = 'block';
}
}
ul.style.display = 'block';
}
lis.onmouseout = function ()
{
ul.style.display = 'none';
}
for ( var i = 0; i < ul_lis.length; i++)
{
ul_lis[i].onclick = function ()
{
this.style.display = 'none';
var h = ul.clientHeight - 124 / ul_lis.length < 0 ? 0 : ul.clientHeight - 124 / ul_lis.length;
ul.style.height = h + 'px';
}
}
}
</script>
</head>
<body>
<ul>
<li id="lis" class="lis"><a class="link" href="#">应用</a>
<ul id="ul1">
<li>帅锅1</li>
<li>风景2</li>
<li>好吃的3</li>
<li>好玩的4</li>
<li>放假了5</li>
</ul></li>
</ul>
</body>
</html>
热心网友
时间：2023-10-12 08:42
