Hey, I'm working on a project in which i have a <ul> with a bunch of <li> elements which are displayed with
These <li> elements wrap around since there are a lot of them. Also, the containing div's width is set by percentage, so when the browser is resized to become smaller, the <li> elements wrap around accordingly too.
Now, when someone hovers over one of the <li> elements, I want to add a class to the next and previous li elements, but ONLY if they are in the same line. that is, say the <li> elements wrap around after every 5 <li>s, and someone hovers over the 5th one, the class should be added to the one before it (which i already got to work) but NOT the one after (that is, the first element on line 2).
Is there any way i can select the next element (for which im using .next() ) ONLY if its in the same line, or to check if the items are on the same line, and ONLY THEN add the class?
Hey Jake, thanks a ton, that helped a lot. Except there's still a small problem i forgot to mention.
Thing is, when you hover on the li element, its scales up 1.5 times ( using css ). Now using your script, the li element (when hovered on) scales up, and the class is applied to the next and previous li elements. However, when i hover on a neighbouring element, since the first element was already scaled up, the position from the top ain't the same anymore. Because of this, it doesn't receive the class now. Any solution to this?
Btw, if you could help me out with one more thing. Iv'e set the ul to be sortable. So while the user is sorting the <li> elements, could I apply the class to the previous and next elements. That is say in a list of 5 items, when you hover on the 3rd element, the 2nd and 4th get the class. But when the user drags the 3rd element, and positions it as the 2nd element (still holding the mouse button), couldI apply the class to the 1st and 3rd element? And how can I do this?