Can i add class to a different element of hover with jquery/js

Question

i have mutable elements with different id and want to match the id name with the class on the A tag then toggle a class to the a tag`

    <a id="AB" href="" class="divone marker"><span>This is ab</span></a>
    <a id="ABA" href="" class="divtwo marker"><span>This is aba</span></a>
    <a id="ABAB" href="" class="divthree marker"><span>This is abab</span></a>

<div id="divone"></div>
<div id="divtwo"></div>
<div id="divthree"></div>

when i hover over the div it gets the ID then matches it to the class on the a tag and adds class active and when i remover the hover it removes the class

I hope this makes sense and any help would be much appreciated

Thanks in advance Dan

Can you show us what you have tried? – talemyn Jun 02 '15 at 16:17 — talemyn, Jun 02 '15 at 16:17

Анатолий Ивашов · Accepted Answer · 2015-06-02T16:40:53.757

1

You can use jQuery.hover()

http://jsfiddle.net/4snhdpx1/6/

$('div').hover(function(event) {
    if (event.type == 'mouseenter') {
        $('.' + this.id).addClass('active');
    } else {
        $('.' + this.id).removeClass('active');
    }
});

And just for fun you can use shorter code :)

http://jsfiddle.net/4snhdpx1/8/

$('div').hover(function(e) {
    $('.' + this.id)[e.type == 'mouseenter' ? 'addClass' : 'removeClass']('active');
})

edited Jun 02 '15 at 16:40

answered Jun 02 '15 at 16:35

Анатолий Ивашов

240
2
6

@stephen-p if you about deprecated `hover`, you can see that `hover` still works fine in version 1.8+ and 2+ and others. So you can use it. And it make sense - look at `hover` source code and you'll see that it just adds two callbacks to element: `hover: function( fnOver, fnOut ) { return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); }` – Анатолий Ивашов Jun 03 '15 at 09:06
@АнатолийИвашов - no, not concerned with deprecation, I just thought that answer was useful with its updates and presenting different approaches. – Stephen P Jun 03 '15 at 17:33

score 0 · Answer 2 · answered Jun 02 '15 at 16:26

I wrapped the divs in another container to have an easier access.

$('#container > div').on('mouseenter', function(){
    var $el = $('.' + $(this).attr('id'));
    $el.addClass('active');
});
$('#container > div').on('mouseleave ', function(){
    var $el = $('.' + $(this).attr('id'));
    $el.removeClass('active');
});

https://jsfiddle.net/s9628o2y/

score 0 · Answer 3 · answered Jun 02 '15 at 16:26

You can do it like this with jQuery.

$('a').on('mouseenter', function() {
  var classList = $(this).attr('class').split(/\s+/);
  $.each(classList, function(index, classname) {
    $('#' + classname).addClass('active');
  });
});

$('a').on('mouseleave', function() {
  var classList = $(this).attr('class').split(/\s+/);
  $.each(classList, function(index, classname) {
    $('#' + classname).removeClass('active');
  });
});

.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="AB" href="" class="divone marker"><span>This is ab</span></a>
<a id="ABA" href="" class="divtwo marker"><span>This is aba</span></a>
<a id="ABAB" href="" class="divthree marker"><span>This is abab</span></a>
<br />
<div id="divone">one</div>
<div id="divtwo">two</div>
<div id="divthree">three</div>

Can i add class to a different element of hover with jquery/js

3 Answers3