Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
I tweaked the Javascript a bit and one line of CSS. I think this is what you
were trying to accomplish?http://jsbin.com/acori/16/
Many thanks! Yes it does.
$('#nav li ul li').hover(function()
It never occurs to me to target hover class. I thought when cursor moves away
from a li and move to its's siblings, the hover no longer applies to that li
class but the sibling where the cursor points to.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
I am trying to achieve this via jQuery by adding a class as I don't think it's possible with CSS (but maybe one of the CSS3 selectors can doit?). http://jsbin.com/acori/15/ The menu is generated by the CMS system so there is restriction to adding new class directly to a specific menu item. It's a 3 level menu but the flyout starts from second level (2nd level menu 3). By default, the 1st level menu has a top-level class for anchor tag while 2nd and 3rd level don't have. What I want (and thought the easier way) to achieve is to target the top-level to find the 2nd level menu 3, so that I can add a current class for 2nd level menu 3, so that when flyout menu expanded, and when cursor moves to the third level, the 2nd level menu 3 has the same white background color as the hover does. I have this code in which the last line is how I want to add the current class. jQuery(#nav ulli).find(a.level-top li).parent(li).addClass(current) Thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
Not sure if this is exactly what you are looking for, but you can try
adding another selector to this code:
#nav .current,
#nav a:hover, #nav a:focus {
background-color:#fff!important;
color:#333;
}
Like this:
#nav .current,
#nav a:hover, #nav a:focus,
#nav ul li:hover a {
background-color:#fff!important;
color:#333;
}
Note that IE 6/7 don't support :hover on list items.
- Jon
On Tue, Apr 5, 2011 at 4:47 AM, tee weblis...@gmail.com wrote:
I am trying to achieve this via jQuery by adding a class as I don't think
it's possible with CSS (but maybe one of the CSS3 selectors can doit?).
http://jsbin.com/acori/15/
The menu is generated by the CMS system so there is restriction to adding new
class directly to a specific menu item. It's a 3 level menu but the flyout
starts from second level (2nd level menu 3).
By default, the 1st level menu has a top-level class for anchor tag while
2nd and 3rd level don't have. What I want (and thought the easier way) to
achieve is to target the top-level to find the 2nd level menu 3, so that
I can add a current class for 2nd level menu 3, so that when flyout menu
expanded, and when cursor moves to the third level, the 2nd level menu 3
has the same white background color as the hover does.
I have this code in which the last line is how I want to add the current
class.
jQuery(#nav ulli).find(a.level-top
li).parent(li).addClass(current)
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] CSS challenge: make a li stays same bg color when cursor moves to its siblings
I tweaked the Javascript a bit and one line of CSS. I think this is what you
were trying to accomplish?
http://jsbin.com/acori/16/
Hope it helps.
On Tue, Apr 5, 2011 at 6:38 PM, Jon Reece jon.re...@gmail.com wrote:
Not sure if this is exactly what you are looking for, but you can try
adding another selector to this code:
#nav .current,
#nav a:hover, #nav a:focus {
background-color:#fff!important;
color:#333;
}
Like this:
#nav .current,
#nav a:hover, #nav a:focus,
#nav ul li:hover a {
background-color:#fff!important;
color:#333;
}
Note that IE 6/7 don't support :hover on list items.
- Jon
On Tue, Apr 5, 2011 at 4:47 AM, tee weblis...@gmail.com wrote:
I am trying to achieve this via jQuery by adding a class as I don't think
it's possible with CSS (but maybe one of the CSS3 selectors can doit?).
http://jsbin.com/acori/15/
The menu is generated by the CMS system so there is restriction to adding
new class directly to a specific menu item. It's a 3 level menu but the
flyout starts from second level (2nd level menu 3).
By default, the 1st level menu has a top-level class for anchor tag
while 2nd and 3rd level don't have. What I want (and thought the easier way)
to achieve is to target the top-level to find the 2nd level menu 3, so
that I can add a current class for 2nd level menu 3, so that when
flyout menu expanded, and when cursor moves to the third level, the 2nd
level menu 3 has the same white background color as the hover does.
I have this code in which the last line is how I want to add the
current class.
jQuery(#nav ulli).find(a.level-top
li).parent(li).addClass(current)
Thanks!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Manny Blum
manny.b...@gmail.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
