How to work with Click Event Handler jQuery

my JS Fiddle : https://jsfiddle.net/DTcHh/19134/

I Created this hover effect with css . i want the same effect on('click')with jQuery . When the user clicks on any one of the item . the clicked item will gets activated :

The Clicked item will be activated

and the other items will be deactivated :

enter image description here

Answers 1

  • In you onclick method, you could use jQuery css method for adding css just like that.

    $("item1").css({"background-color": "#000"});
    $("item1").css({"background-image", "url('http://demo.musemaster.net/Clu/Clu-1/images/u579-r.png')"}); 
    

    You could also define class in css and after onclick, add the class to that specific item by using addClass method.

    $("item1").addClass('yourHoverClassName');
    

    CSS:

    .item1:hover .image1,.item1.yourHoverClassName .image1{
      background-image:url('http://demo.musemaster.net/Clu/Clu-1/images/u579-r.png');
      background-color:#000;
    }
    

Related Articles