2

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
maham.shahid
  • 301
  • 4
  • 19
  • 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 Jun 25 '14 at 14:08
  • 1
    @TilwinJoy, he didn't say anything about styles, he wants to trigger the handler. We have no idea what's in the handler. – Smeegs Jun 25 '14 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 Jun 25 '14 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 Jun 25 '14 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 Jun 25 '14 at 14:20
  • @TilwinJoy Actually what I'm trying to do is to change the color of buttons placed on the tile when I hover over the tile. I already have set the color values using .btn-danger:hover attribute. So, I simply want this to trigger whenever I hover over the tile. And then the color needs to go back to it previous value when I'm not hovering over the tile. So, it can be done the way you suggested but that'll require more amount of coding, which I don't really want – maham.shahid Jun 25 '14 at 14:33
  • @NoN01, TwilinJoy is right. You need to add a second class, I'll update my answer to show what I mean. – Smeegs Jun 25 '14 at 14:36
  • @NoN01, I've updated my answer to show how to do it with a second class. It doesn't require much code at all. – Smeegs Jun 25 '14 at 14:39

2 Answers2

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

Community
  • 1
  • 1
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
1

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);
}
Smeegs
  • 9,151
  • 5
  • 42
  • 78