javascript - 导航菜单悬停效果仅在特定情况下

Question

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

当我将鼠标悬停在联系按钮上时(当“立即购买”关闭时)，我如何重新创建悬停效果的任何想法？

这就是我到目前为止所做的给你一个想法

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

Answer 1

这并不难。

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

<element class="firstclass hover otherclass">

现在，构建一个悬停 Action : $("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);
});