CODEWITHSUNDEEP
javascriptjqueryjquery-events
Howard
Howard

Reputation: 19825

Pass mouseover event to another using jQuery

Consider the HTML below

<span id='one'>one</span>
<span id='two'>two</span>

and CSS

span {
  background-color:green;
  display: inline;
  color: white;
}

span:hover {
  background-color:red;
}

What I want is: when mouse hover two, the one will also be hovered, so I use the jQuery

$('#two').hover(function (e) {
    var p = $(this).prev().trigger(e.type);
});

Seems not working.

https://jsfiddle.net/59rnyj6f/

Upvotes: 0

Views: 233

Answers (1)

Gavriel
Gavriel

Reputation: 19247

Why don't you add a class to one, let's say "pseudo-hover", and when #two is hovered/unhovered toggle the "pseudo-hover" class on #one?

#one.pseudo-hover { background-color:red; }

$('#two').hover(function (e) {
    $("#one").addClass("pseudo-hover");
}, function (e) {
    $("#one").removeClass("pseudo-hover");
})

Upvotes: 1

Related Questions