js鼠标点击事件出现图片
发布网友
发布时间：2022-04-23 18:09
共2个回答
热心网友
时间：2023-10-12 08:42
<!DOCTYPE HTML>
<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
12345671011121314151617181920212223242526272829303132333435363738394041424344454748495051525354555657585960616263656667686970717273747576777879808182838485868788909192939495969798<!DOCTYPE HTML><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>
