You're only passing one value for background-position; there should be
a left and top.
Looking at the code you posted and the images themselves, it's not
clear to me what you want the hovered link to look like. I'm assuming
here that you want the hovered link to change to black text, and the
others to be blurred.
#main_nav li a {
text-indent: -999999px;
overflow: hidden;
display: block;
height: 80px;
background-position: 0 0; /* set it here globally */
}
/* default white text
*/
#home{ background: url(/media/1.jpg) 0 0; width: 103px; }
#why { background: url(/media/2.jpg) 0 0; width: 103px; }
#try { background: url(/media/3.jpg) 0 0; width: 103px; }
/* class for the blurred state
*/
#main_nav li a.Blur {
background-position: -206px 0;
}
/* Changes the hovered link to black text
*/
#main_nav li a:hover { background-position: -103px 0; }
/* there's no need to assign hover callbacks for each link individually
*/
$(function(){
$("#main_nav li a").hover(
function(){$("#main_nav li a").addClass('Blur');},
function(){$("#main_nav li a").removeClass('Blur');}
);
});
The one thing this is missing is the fadeIn effect you had. But you
could use this to potentially add that, maybe with setTimeout.
On Fri, Dec 5, 2008 at 7:32 AM, ivanisevic82 <[EMAIL PROTECTED]> wrote:
>
> Hi!
> Sorry for my english!
> I need help to create a special menu with jquery.
> In this menu, when I will be hover a "button", it remain the same, but
> all the other changes!
>
> You can see a very basics and work in progress example in the orange
> menu here: www.ivanisevic82.com
>
>
> I used this tutorial:
>
> http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/
>
> So, I created this menu with this code:
>
> PHP:
>
> <ul>
> <li><a href="http://xxx.com"; accesskey="3" id="home"
> title="Home">Home</a></li>
> <li><a href="http://yyy.com"; accesskey="4" id="why" title="why">Why</
> a></li>
> <li><a href="http://ppp.com"; accesskey="5" id="try" " title="try">Web
> Design</a></li>
> </ul>
>
> CSS:
>
> #main_nav {
> list-style: none;
> margin: 0;
> padding: 0;
> }
>
> #main_nav li {
> float: left;
> list-style: none;
> }
>
> #main_nav li a {
> text-indent: -999999px;
> overflow: hidden;
> display: block;
> height: 80px;
> }
>
> #home{ background: url(/media/1.jpg); width: 103px; }
> #why { background: url(/media/2.jpg); width: 103px; }
> #try { background: url(/media/3.jpg); width: 103px; }
>
> #main_nav:hover li a#home { background-position: -206px; }
> #main_nav:hover li a#why { background-position: -206px; }
> #main_nav:hover li a#try { background-position: -206px; }
>
> #home:hover { background: url(/media/1.jpg) 0 0 !important; }
> #why:hover { background: url(/media/2.jpg) 0 0 !important; }
> #try:hover { background: url(/media/3.jpg) 0 0 !important; }
>
>
>
>
>
> Now what I'd like to do, is try to apply a fad-in / fade-out effect
> (with jquery) everytime a part of the menu has to change aspect.
>
> I tried to build this js ofr jquery, but it doesn't works:
>
> $(function(){
> $("#home").hover(
> function(){$("#main_nav:hover li a#webdesign").fadeIn('slow');},
> function(){$("#main_nav:hover li a#about").fadeIn('slow');});
> });
>
>
> Can you help me to build a js working for my project?
>
> Thank you, bye!
>
