Question

How can I trigger the distant element which associates with the current button?

For instance,

HTML

<ul class="menu-1">
    <li><a href="#">button 1</a></li>
    <li><a href="#">button 2</a></li>
    <li><a href="#">button 2</a></li>
</ul>

<ul class="menu-2">
    <li><a href="#">button 1</a></li>
    <li><a href="#">button 2</a></li>
    <li><a href="#">button 2</a></li>
</ul>

So when I hover the button 1 in menu-1, the button 1 in menu-2 should be hovered too.

And so when I hover the button 1 in menu-2, the button 1 in menu-1 should be hovered too.

my working jquery,

$(".menu-1 li").hover(function () {

        var text = $(this).text();

        if ($('.menu-2 li a:contains("'+text+'")').length > 0) {
            $('.menu-2 li a:contains("'+text+'")').trigger("mouseenter");
        }
    });

jsfiddle,

http://jsfiddle.net/JDG7U/

Answer 1

The approach I used is to replace your :hover with a .hover class and assign the CSS changes to that class. Then I added a data- attribute to each li and filtered on that. (Using a class caused problems, because I couldn’t read an arbitrary class attribute without picking up the hover class as well.)

A bit complicated, but it left some pretty short and simple code, and it permits reordering of the elements if you need that.

HTML:

<ul class="menu-1">
    <li data-num="1"><a href="#">button 1</a></li>
    <li data-num="2"><a href="#">button 2</a></li>
    <li data-num="3"><a href="#">button 3</a></li>
</ul>

<ul class="menu-2">
    <li data-num="2"><a href="#">button 2</a></li>
    <li data-num="3"><a href="#">button 3</a></li>
    <li data-num="1"><a href="#">button 1</a></li>
</ul>​

JS:

$('ul li').hover(function() {
    var num = $(this).data('num');
    $('li').filter(function() {
        return $(this).data('num') === num;
    }).toggleClass('hover');
});​

CSS:

ul li.hover a {
    color: green;
}​

http://jsfiddle.net/he7Uk/2/