导航菜单悬停效果仅在特定场合答案

【问题标题】：Navigation Menu Hover Effect only on a Particular Occasion导航菜单悬停效果仅在特定场合
【发布时间】：2011-06-09 14:25:00
【问题描述】：

我需要该网站导航菜单http://recruitmentmalta.com/ptowers/ 的确切效果，但代码更简洁。这段代码是使用从 PSD 转换为 HTML/CSS 的工具生成的，基本上创建了一堆无用的代码。我知道如何制作该菜单，除了只有在联系人悬停时才会关闭“立即购买”效果的部分。

当我将鼠标悬停在联系按钮上时（当 Shop Now 被关闭时），我有什么想法可以重新创建悬停效果吗？

这是我到目前为止所做的，目的是为您提供一个想法

    <ul>
        <li id="homeButton"> <img src="images/home.png" onmouseout="this.src='images/home.png'" onmouseover="this.src='images/homeHover.png'" width="115" height="55" alt="home" /></li>
        <li id="aboutButton"> <img src="images/about.png" onmouseout="this.src='images/about.png'" onmouseover="this.src='images/aboutHover.png'" width="115" height="55" alt="about" /></li>
        <li id="newsButton"> <img src="images/news.png" onmouseout="this.src='images/news.png'" onmouseover="this.src='images/newsHover.png'" width="115" height="55" alt="news" /></li>
        <li id="brandsButton"> <img src="images/brands.png" onmouseout="this.src='images/brands.png'" onmouseover="this.src='images/brandsHover.png'" width="115" height="55" alt="brands" /></li>
        <li id="storesButton"> <img src="images/stores.png" onmouseout="this.src='images/stores.png'" onmouseover="this.src='images/storesHover.png'" width="115" height="55" alt="stores" /></li>
        <li id="careersButton"> <img src="images/careers.png" onmouseout="this.src='images/careers.png'" onmouseover="this.src='images/careersHover.png'" width="115" height="55" alt="careers" /></li>
        <li id="contactButtonMenu"> <img src="images/contactButton.png" onmouseout="this.src='images/contactButton.png'" onmouseover="this.src='images/contactButtonHover.png'"  width="115" height="55" alt="contact" /></li>
        <li id="shopNowButton"> <img src="images/shopNowHover.png" width="114" height="53" alt="Shop Now" /> </li>
    </ul>

这是我的 JS Fiddle 链接：http://jsfiddle.net/GHHJM/

【问题讨论】：

请贴出有问题的代码示例，以便问题更简洁。
@John Strickler - 我提供了相关的网站，因此代码都在那里，除了我只有设计草图。

标签： javascript jquery html css menu

【解决方案1】：

这并不难。

在<ul> 元素中构建菜单，这在今天很常见。构建一个名为 hover 的样式，上面带有边框以模仿高光。将最后一个元素的默认类（呈现页面时的样式）设置为具有边框。对于初学者来说，其他一切都是正常的。请记住，在处理样式时，您可以“堆叠”类，例如：

<element class="firstclass hover otherclass">

现在，构建一个悬停动作： $("li").hover(function () { $(elementtoputborderon).addClass("hover"); }, function () { $(this).removeClass("hover"); })

并且，对于它关闭的部分： $("#idofcontactbtn").hover(function () { $('#idoflastelement').removeClass("hover"); }, function () { $('#idoflastelement').addClass("hover"); })

要在最后一个元素上获得“淡入淡出”效果，您可以尝试以下操作：

$('#lastitem').hover(function() { $(this).toggleClass('pretty-hover', 500); });

【讨论】：

我是 javascript 新手，所以我不熟悉这个行话。当您提到样式时，您的意思是创建一个类，对吗？每个 li 应该有一个元素吗？
我在上面发布的代码中添加了所有需要的悬停内容，我应该只为联系按钮添加元素吗？
我添加了一个 JS Fiddle 链接：jsfiddle.net/GHHJM - 让我知道我做错了什么。 .hover 类也在 css 的末尾。

【解决方案2】：

我终于以一种相当有效的简单方法解决了这个问题，这是两个按钮效果的代码部分。如果任何机构需要，我希望这会有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Hover</title>
<script type='text/javascript' src='jquery.js'></script>

<script  type='text/javascript'>
$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(contactButtonMenu).attr("src","images/contactButtonHover.png");
            }, function() {
        $(contactButtonMenu).attr("src","images/contactButton.png");
    });
});

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(shopNowButton).attr("src","images/shopNow.png");
            }, function() {
        $(shopNowButton).attr("src","images/shopNowHover.png");
    });
});
</script>

</head>

<body>

<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />
<img id="shopNowButton" src="images/shopNowHover.png" alt="Shop Now" class="shopNowButton" />

</body>
</html>

但是这在 Firefox 中不起作用，有什么想法吗？

【讨论】：

@bpeterson76 感谢您的帮助，但使用 jQuery 后，它变得更加简单