javascript 鼠标悬停在图像上时显示下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15601394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show dropdown menu when image is moused over
提问by Mohammad Adil
I am trying to have drop down menu whenever someone hover mouse over an image.
每当有人将鼠标悬停在图像上时，我都会尝试使用下拉菜单。
<div>
<img id="whoimg" onmouseover="forImg(this)" src="/static/images/whoisitfor.png" height="70" style="cursor:pointer;">
</div>
<div style="position: absolute; right:30px; top: 23px;">
<span style="font-weight: bold;font-size:30px; color: #C4066B;">FOR</span>
</div>
</div>
I am able to write onmouseover function. But as i am new at web development i don't know what to do next. I have Three images placed horizontally including above one.
我可以编写 onmouseover 函数。但由于我是网络开发新手，我不知道下一步该做什么。我有三个图像水平放置，包括上面的一个。
function forImg()
{
alert("FOR");
}
I have tried javascript but i am getting no where. Don't know what to do...Please help me
我已经尝试过 javascript，但我无处可去。不知道该怎么办...请帮帮我
回答by Mohammad Adil
You wanted to show dropdown menu on mouseover of an image;
您想在鼠标悬停在图像上时显示下拉菜单；
Let this be your menu:
让这成为您的菜单：
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
bind event on your image like this :
像这样在您的图像上绑定事件：
$('#whoimg').mouseover( function(){
$('#nav_menu').slideDown();
});
Demo Fiddle
演示小提琴
回答by nullSharp
I would highly suggest using CSS for this. There are plenty of tutorials available if you do some googling... or you could just take the easy way out and use a site like this: http://cssmenumaker.com/css-drop-down-menu
我强烈建议为此使用 CSS。如果您使用谷歌搜索，有很多可用的教程......或者您可以采取简单的方法并使用这样的网站：http: //cssmenumaker.com/css-drop-down-menu
回答by Aamir Shahzad
See it here how it works...i am sure this will help you...don't forget to rate up.
在这里查看它是如何工作的......我相信这会帮助你......不要忘记评价。
best of luck!
祝你好运！
<!DOCTYPE html>
<html>
<head>
<script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p>
</body>
</html>
