JQuery Activate hover status using other element

Question

I must to activate hover on an svg based element map.

So I got the map that can change color of a region hovering in selected region. Near this map I got a list of regions as link that must to highlight the relative region on the map hovering on that link.

Example Fiddle https://jsfiddle.net/fgsh896b/

I got something like this:

Example

function mouseEnt(id) {
 $('#' + id).trigger('hover');
}

.item {
  width:100px;
  height: 100px;
  border: 1px solid #000; 
  position: relative;
  margin-left: 10px;
  float: left;
}
.item:hover {
  background-color: #000;
}
#link {
 top: 150px;
 position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class="item">
 Item 1
</div>
<div id="2" class="item">
 Item 2
</div>
<div id="link">
  <a href="#" class="link" onMouseEnter="mouseEnt('1')">Link1</a>
  <a href="#" class="link" onMouseEnter="mouseEnt('2')">Link2</a>
</div>

My function is wrong, I've tried with others jquery functions but maybe my logic is incorrect. how to reach this?

Related: https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover — j08691, Jul 21 '17 at 15:53

score 2 · Accepted Answer · answered Jul 21 '17 at 16:00

As @j08691 linked to in the comments on your question, you cannot cause a CSS :hover pseudo selector to fire by faking an event in JS.

However what you can do is set a class on the target element manually when you hover over the required link. To improve the logic you can use a data attribute to link them together and use an unobtrusive event handler, something like this:

$(function() {
  $('#link a').hover(function() {
    $('#' + $(this).data('rel')).toggleClass('hover');
  });
});

.item {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: relative;
  margin-left: 10px;
  float: left;
}

.item:hover,
.item.hover {
  background-color: #000;
}

#link {
  top: 150px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="1" class="item">Item 1</div>
<div id="2" class="item">Item 2</div>
<div id="link">
  <a href="#" class="link" data-rel="1">Link1</a>
  <a href="#" class="link" data-rel="2">Link2</a>
</div>

JQuery Activate hover status using other element

1 Answers1