我如何通过悬停在此ul块之外的另一个li元素来更改li元素的css属性

Question

I am creating two separate ul>li block to create a menu as like the below structure

http://puu.sh/g0Khj/5fb3e53fa1.png

I need to show some reflection of the hovered/selected menu, so I have decided to used two ul structure with same size. Now my question is, if I hovered any li on the ul class a, I need to change the respected css(nth element) of the bottom ul, ie class b

Is it possible?

Thanks

Answer 1

You can use jquery

$(".a").children('li').each(function(indice, elt) {
     $(elt).hover(function(){
         var child = $(".b").children('li')[indice];
         $(child).css("your css");
     }
}