鼠标悬停时显示下拉菜单答案

【问题标题】：Show dropdown menu when image is moused over鼠标悬停时显示下拉菜单
【发布时间】：2013-03-14 03:25:17
【问题描述】：

每当有人将鼠标悬停在图像上时，我都会尝试使用下拉菜单。

    <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>

我可以编写 onmouseover 函数。但是由于我是 Web 开发的新手，所以我不知道下一步该做什么。我有三张水平放置的图片，包括上面一张。

function forImg()
{
alert("FOR");
}

我已经尝试过 javascript，但我无处可去。不知道该怎么办...请帮助我

【问题讨论】：

你是如何包含 JS 的？
试试 onmouseover="alert('It works!')"
我试过onmouseover，但问题是鼠标悬停在图像上后，列表必须下拉。我认为它需要jquery。如果你能帮我...请...

标签： javascript jquery html css web-applications

【解决方案1】：

在这里查看它是如何工作的...我相信这会对您有所帮助...不要忘记评价。

祝你好运！

<!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>

【讨论】：

【解决方案2】：

我强烈建议为此使用 CSS。如果您进行谷歌搜索，有很多可用的教程......或者您可以采取简单的方法并使用这样的网站：http://cssmenumaker.com/css-drop-down-menu

【讨论】：

我同意@nullSharp...为此使用CSS。类似于：div.parentImg:hover > ul#dropdown{ display: inline-block; }

【解决方案3】：

您想在鼠标悬停时显示下拉菜单；

让这成为你的菜单：

 <div id="nav_menu">
            <ul>
                <li id="l1">AAAAA</li>
                <li>BBBBB</li>
                <li>CCCCC</li>
                <li>DDDDD</li>
            </ul>
   </div>

像这样在你的图像上绑定事件：

$('#whoimg').mouseover( function(){
    $('#nav_menu').slideDown();
});

Demo Fiddle

【讨论】：

我尝试了您的解决方案，但似乎没有任何反应。我有三张图片，所有这些图片都有下拉菜单。每当有人将鼠标悬停在他们身上时，他们应该对该事件做出反应。
您的解决方案终于奏效了。但是你能告诉我吗。如何防止下拉菜单关闭，直到用户选择该菜单中的链接或项目..感谢您的帮助...