how to apply hover and click event at the same time with jQuery

Question

i want to apply hover and click event at the same time. my hover() is working perfectly but when i clicks on the div it don't shows anything ... i was watching examples on stackoverflow but didn't found. i want when i clicks on the div it show me the same behaviour as it showing me on hover()

fiddle : http://jsfiddle.net/gt70233f/

myHTML

  <div class="col-lg-3" id="majic">
        <img src="http://www.endlessicons.com/wp-content/uploads/2013/02/magic-icon-614x460.png" style="height:80px; width:80px;">
        <h4>WEB APPLICATIONS</h4>
      </div>

my JS

  function hoveronImage(id,imageonhover,imageonhoverout){

    $(id).on('mouseover',function(){

     $(this).children('img').attr('src','http://icons.iconarchive.com/icons/designcon test/vintage/256/Magic-Wand-icon.png')
     .next('h4').css({
     'color':'#eab000 '

     });

   });

   $(id).on('mouseout',function(){

    $(this).children('img').attr('src','http://www.endlessicons.com/wp-  content/uploads/2013/02/magic-icon-614x460.png')
    .next('h4').css({
    'color':'#404040'
    });

   });

   }

   hoveronImage('#majic','hovermajic','majic');

i was trying

    $(id).on('mouseover click',function(){

     $(this).children('img').attr('src','http://icons.iconarchive.com/icons/designcon test/vintage/256/Magic-Wand-icon.png')
     .next('h4').css({
     'color':'#eab000 '

     });

   });

That doesn't make sense... the effect you want is happening on hover, why would you want to re-apply the same effect on click? You can only click on an item when the mouse is hovering over it anyway? — An0nC0d3r, Nov 14 '15 at 20:01
Why do you need a `click` handler? Like @AdamJeffers said, in order to click something, you have to hover over it first, so the click handler is redundant. — Barmar, Nov 14 '15 at 20:10
Still don't understand why you would want to do this for the same reasons I've already explained... however this may provide you with some help??? http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function — An0nC0d3r, Nov 14 '15 at 20:12
actually i making a text carousel . and when i hover over div i want the image and heading color to be changed . which is working perfectly . but i also want when i click the div i want to make the 2nd image replace to first image and also heading color . so in this sense my current div will be active as you normally sees in text or image carousel — Daniel, Nov 14 '15 at 20:17

score 1 · Answer 1 · answered Nov 15 '15 at 08:52

I've never needed to do this before but knowing jQuery this should work:

$(id).on('mouseover', function(){
   //cool stuff here
}).on('click', function(){
   //other cool stuff here
});

If it's the same action (which it seems like it is) then assign to a named function.

function coolStuff(){
    //cool stuff here
};

$(id).on('mouseover', coolStuff).on('click', coolStuff);

Of course, since the action is firing on mouseover first, if you aren't incrementing changes on each event, you probably won't see any difference on click.

score 0 · Answer 2 · answered Nov 14 '15 at 20:16

0

You can achieve by simply using :hover and click.

Use a css like

div#majic > h4{
color: "#404040";
}

div#majic > h4:hover, div#majic > h4.majichover{
color:"#eab000";
}

Then in your like add the "magichover" class to h4

answered Nov 14 '15 at 20:16

Shahzad Fateh Ali

698
8
22

how to apply hover and click event at the same time with jQuery

2 Answers2