导航菜单 Hover 仅对特定场合的影响
[英]Navigation Menu Hover Effect only on a Particular Occasion
问题描述
I need the exact effect of this website's navigation menu http://recruitmentmalta.com/ptowers/ but in neater code.
我需要该网站导航菜单http://recruitmentmalta.com/ptowers/的确切效果，但代码更简洁。 This code was generated with a tool which converts from PSD to HTML/CSS and basically created a bunch of useless code.这段代码是使用从 PSD 转换为 HTML/CSS 的工具生成的，基本上创建了一堆无用的代码。 I know how to make that menu, except for the part where the Shop Now effect should turn off only if the contact is hovered over.我知道如何制作该菜单，除了只有在联系人悬停时才会关闭“立即购买”效果的部分。
Any ideas of how I can recreate that hovering off effect when I hover over the contact button (when Shop Now gets turned off)?当我将 hover 放在联系按钮上时（当 Shop Now 关闭时），我如何重新创建悬停效果的任何想法？
This is what I have done so far to give you an idea这就是我到目前为止所做的给你一个想法
<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>
This is my JS Fiddle Link: http://jsfiddle.net/GHHJM/这是我的 JS 小提琴链接： http://jsfiddle.net/GHHJM/
2 个解决方案
解决方案1
1 2011-06-09 15:06:59
That's not so difficult.那不是那么难。
Build the menu in a <ul> element as is so common today.在<ul>元素中构建菜单，这在今天很常见。 Build a style called hover with a border on it to mimic the highlight.构建一个名为 hover 的样式，其上带有边框以模仿高光。 Set the last element's default class (style when the page is rendered) to have the border.将最后一个元素的默认 class （呈现页面时的样式）设置为具有边框。 All else are just normal for starters.对于初学者来说，其他一切都是正常的。 Remember, when dealing with styles you can "stack" classes such as:请记住，在处理 styles 时，您可以“堆叠”类，例如：
<element class="firstclass hover otherclass">
Now, build a hover action: $("li").hover(function () { $(elementtoputborderon).addClass("hover"); }, function () { $(this).removeClass("hover"); })现在，构建一个 hover 动作： $("li").hover(function () { $(elementtoputborderon).addClass("hover"); }, function () { $(this).removeClass("hover"); })
And, for the part where it turns off: $("#idofcontactbtn").hover(function () { $('#idoflastelement').removeClass("hover"); }, function () { $('#idoflastelement').addClass("hover"); })并且，对于它关闭的部分： $("#idofcontactbtn").hover(function () { $('#idoflastelement').removeClass("hover"); }, function () { $('#idoflastelement').addClass("hover"); })
To get the "fade" effect on the last element, you could try something like this:要在最后一个元素上获得“淡入淡出”效果，您可以尝试以下操作：
$('#lastitem').hover(function() { $(this).toggleClass('pretty-hover', 500); });
解决方案2
0 已采纳 2011-06-20 14:20:21
I've finally solved this in a rather efficient easy way, this is the code part for just the effect of two buttons.我终于以一种相当有效的简单方法解决了这个问题，这是两个按钮效果的代码部分。 I hope this will be of help if any body needs it.如果任何机构需要，我希望这会有所帮助。
<!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>
However this is not working in Firefox, any ideas?但是，这在 Firefox 中不起作用，有什么想法吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.