显示下拉菜单时，图像鼠标悬停

Show dropdown menu when image is moused over

本文关键字：鼠标 悬停 图像 下拉菜单 显示      更新时间：2023-09-26

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

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

我可以写一个鼠标over函数。但由于我是web开发的新手，我不知道下一步该做什么。我有三个图像水平放置，包括上面的一个。

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

我已经尝试过javascript，但我没有得到任何地方。不知道该怎么办……

你想在鼠标悬停在图像上时显示下拉菜单;

让它成为你的菜单: 

 <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小提琴

我强烈建议使用CSS。如果你在谷歌上搜索一下，可以找到很多教程……或者你也可以选择一个简单的方法，使用这样的网站:http://cssmenumaker.com/css-drop-down-menu

看看它是如何工作的…我相信这对你会有帮助……别忘了给自己打分。

祝你好运!
<!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>
相关文章：