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
– talemyn

2015-06-02 16:17:24 +00:00
Commented Jun 2, 2015 at 16:17 — talemyn
– talemyn, Commented Jun 2, 2015 at 16:17

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

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 2, 2015 at 16:40

answered Jun 2, 2015 at 16:35

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

2382 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Анатолий Ивашов Over a year ago

@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 ); }

Stephen P Over a year ago

@АнатолийИвашов - no, not concerned with deprecation, I just thought that answer was useful with its updates and presenting different approaches.

Tom · Accepted Answer · 2015-06-02 16:26:19Z

0

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/

answered Jun 2, 2015 at 16:26

Tom

1959 bronze badges

Comments

Thomas Theunen · Accepted Answer · 2015-06-02 16:26:25Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related