導航菜單 Hover 僅對特定場合的影響
[英]Navigation Menu Hover Effect only on a Particular Occasion
問題描述
我需要該網站導航菜單http://recruitmentmalta.com/ptowers/的確切效果，但代碼更簡潔。 這段代碼是使用從 PSD 轉換為 HTML/CSS 的工具生成的，基本上創建了一堆無用的代碼。 我知道如何制作該菜單，除了只有在聯系人懸停時才會關閉“立即購買”效果的部分。
當我將 hover 放在聯系按鈕上時（當 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/
2 個解決方案
解決方案1
1 2011-06-09 15:06:59
那不是那么難。
在<ul>元素中構建菜單，這在今天很常見。 構建一個名為 hover 的樣式，其上帶有邊框以模仿高光。 將最后一個元素的默認 class （呈現頁面時的樣式）設置為具有邊框。 對於初學者來說，其他一切都是正常的。 請記住，在處理 styles 時，您可以“堆疊”類，例如：
<element class="firstclass hover otherclass">
現在，構建一個 hover 動作： $("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); });
解決方案2
0 已采納 2011-06-20 14:20:21
我終於以一種相當有效的簡單方法解決了這個問題，這是兩個按鈕效果的代碼部分。 如果任何機構需要，我希望這會有所幫助。
<!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 中不起作用，有什么想法嗎？
具有滑動懸停效果的導航菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.