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

我需要本网站的导航菜单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小提琴链接：http://jsfiddle.net/GHHJM/

来源

2011-06-09 Ryan S

请张贴有问题的代码示例，以便问题更加简洁。 – 2011-06-09 14:28:53

@John Strickler - 我关注网站，因此代码就在那里，除此之外，我只能看到设计图。 – 2011-06-10 13:02:01

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

<!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，任何想法？

来源

2011-06-20 14:20:21

@ bpeterson76感谢您的帮助伴侣，但通过jQuery，结果变得更简单 – 2011-06-20 14:21:48

这不是那么困难。

在<ul>元素中构建菜单，因为今天很常见。构建一个叫做悬停的样式，并在其上边框模仿突出显示。设置最后一个元素的默认类（呈现页面时的样式）以具有边框。其他所有事情对于初学者来说都很正常。请记住，使用样式打交道时，你可以“堆叠”类，如：现在

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

来源

2011-06-09 15:06:59 bpeterson76

我是新来的JavaScript，所以我不熟悉这个术语。当你引用风格时，你的意思是创建一个类，对吧？每个李应该有一个元素？ – 2011-06-10 12:59:45

我添加了我在上面发布的代码中需要的所有悬停的东西，我是否应该只为联系人按钮添加元素事物？ – 2011-06-10 13:44:24

我添加了JS Fiddle链接：http://jsfiddle.net/GHHJM/ - 让我知道我做错了什么。 .hover类也在css的最后。 – 2011-06-15 12:39:31

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

回答

相关问题