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小提琴链接：http://jsfiddle.net/GHHJM/

Answer 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); });

Answer 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中无效，有什么想法吗？

导航菜单仅在特定场合使用悬停效果

2 个答案: