導航菜單僅在特定場合下懸停效果

我需要本網站的導航菜單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

導航菜單僅在特定場合下懸停效果

回答

相關問題