highlight specific divs (tds) onhover of a link

javascript, jquery

Solution

You must not use same `id` for different element.

Using `name` you can do

$('a').hover(function() {
  var name = this.name;
  $('a[name='+ name +']').css('color', '#f00')
},function() {
  var name = this.name;
  $('a[name='+ name +']').css('color', 'blue')
});

DEMO

Using `class`

$('a').hover(function() {
  var className = this.className;
  $('a.' + className).css('color', '#f00')
},function() {
  var className = this.className;
  $('a.' + className).css('color', 'blue')
});

DEMO

if you want to use `.on()` for hover then use

$('a').on('hover', function(e) {
    if (e.type == 'mouseenter') {
        var divName = this.name;
        console.log(divName);
        $('div', 'td.' + divName).addClass('match-highlight');
    } else {
        var divName = this.name;
        $('div', 'td.' + divName).removeClass('match-highlight');
    }
});

DEMO

Problem

So i'm just starting to discover how awesome jquery is and how a basic function can drive me nuts to understand. I'm trying to highlight a div with a specific "id" generated via backend ``` <br/><br/><br/><br/> <div id="id_1"> <h2>id_1 - <a class="marker_id_1" href="#top" name="id_1" id="id_1">Top</a> </h2> </div> <div id="id_1"> <h2>id_1 - <a class="marker_id_1" href="#top" name="id_1" id="id_1">Bottom</a> </h2> </div> <div id="id_2"> <h2>id_2 - <a class="marker_id_2" href="#top" name="id_2" id="id_2">Top</a> </h2> </div> <div id="id_2"> <h2>id_2 - <a class="marker_id_2" href="#top" name="id_2" id="id_2">Bottom</a> </h2> </div>​ ``` So if I hover over the "id_1" Top , I want to highlight both the "id_1" Top and Bottom. Below is a link to that so it'll be easier to understand. http://jsfiddle.net/4PgC6/66/ Thanks!!

Original source