鼠标悬停时显示下拉菜单

时间:2013-03-24 17:06:15

标签: javascript jquery html css web-applications

每当有人将鼠标悬停在图片上时,我都会尝试下拉菜单。

    <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功能。但由于我是网络开发的新手,我不知道接下来该做什么。我有三个水平放置的图像,包括一个。

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

我试过javascript但是我没有在哪里。不知道该怎么办......请帮帮我

3 个答案:

答案 0 :(得分:6)

您希望在鼠标悬停图片时显示下拉菜单;

让这成为您的菜单:

 <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

答案 1 :(得分:1)

我强烈建议使用CSS。如果你做一些谷歌搜索,有很多教程可供选择...或者你可以轻松地使用这样的网站:http://cssmenumaker.com/css-drop-down-menu

答案 2 :(得分:0)

在这里查看它的工作原理......我相信这会对你有所帮助......别忘了评价。

祝你好运!


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