Calling hover event of an element when hover event of another element is called

Question

I'm trying to call the hover event of the buttons placed on a tile when I hover over the tile, using jQuery. However, it is not working. This is the code I'm using

<script >
$( "#tile1" ).hover(function() {
    $('.btn-danger').hover();

 });

</script>

I've linked with jQuery separately in the head:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

Can anyone point out what the problem might be? I can provide more information about the code if required.

If you just want to change the styles of another element, you could simply add a css class instead of trying to trigger hover... — T J
– T J, Commented Jun 25, 2014 at 14:08
@TilwinJoy, he didn't say anything about styles, he wants to trigger the handler. We have no idea what's in the handler. — Smeegs
– Smeegs, Commented Jun 25, 2014 at 14:10
@Smeegs that's why i said "If you just want to". hope you can read. i was giving an idea that might or might not be useful. that's why i've added it in comments. — T J
– T J, Commented Jun 25, 2014 at 14:15
@TilwinJoy, you could have easily said. If you want to rewrite an OS there are better ways to go about it. But that's not relevant to the question. Stick to what's been asked. Hope you can read. — Smeegs
– Smeegs, Commented Jun 25, 2014 at 14:17
@Smeegs Well i wanted to know what's OP's intention for triggering hover. i've all rights to ask for more info in comments. — T J
– T J, Commented Jun 25, 2014 at 14:20

Community · Accepted Answer · 2017-05-23 11:57:50Z

3

Try this:

$("#tile1").hover(function(event) {
  $('.btn-danger').trigger(event.type);
});

Update:

Looks like you are trying to trigger hover defined in CSS. Unfortunately, you can not trigger the hover set via css. An alternative could be to set css to some class(same css written for hover) and then add/remove class using .addClass() and .removeClass() respectively.

See trigger-css-hover-with-js

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Jun 25, 2014 at 14:07

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

1 Comment

Smeegs Over a year ago

@MilindAnantwar, he's trying to apply a hover css style on a hover event.

Smeegs · Accepted Answer · 2014-06-25 14:57:35Z

You need to add a second class and handle it in the css. You mentioned that you already created a hover class.

I've added a hovered class to your styles. And the style will apply when hovering over the button, or if the hovered class is added to the button.

.btn-danger:hover, .btn-danger.hovered{
     background: rgba(41, 128, 185,1.0); 
     border-color: rgba(41, 128, 185,1.0);
}

Then on the hover event of the tile I added and remove the hovered class.

$( ".tile" ).hover(function() {
    $(this).find('.btn-danger').addClass('hovered');
 }, function() {
    $(this).find('.btn-danger').removeClass('hovered');
 });

Edit:

However, if the button is nested on the tile, you can do this in css with this selector.

.btn-danger:hover, .tile:hover .btn-danger{
     background: rgba(41, 128, 185,1.0); 
     border-color: rgba(41, 128, 185,1.0);
}

Collectives™ on Stack Overflow

Calling hover event of an element when hover event of another element is called

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related