How to work with Click Event Handler jQuery

Question

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 :

and the other items will be deactivated :

Answer 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;
}

Answer 2

$(document).ready(function(){
	$('.item').click(function(){
		$(this).siblings('.item').removeClass('active');
		$(this).addClass('active');
	})
})

h2 { float: left; }
/* item 1 */
.item { height: 100px; width: 100%; }
.item.active h2 { color: yellow; }
.image { height: 80px; width: 80px; border-radius: 100px; border: 1px solid #000; background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u579.png'); background-repeat: no-repeat; background-position: center; margin-left: 20px; float: left; }
.item.active .image { background-color: #000; }
.item.active .image1 { background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u579-r.png'); }
.image2 { background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u589.png'); }
.item.active .image2 { background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u589-r.png'); background-color: #000; }
.image3 { background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u599.png'); }
.item.active .image3 { background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u599-r.png'); }

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<h1>Hover on me</h1>
<div class="item1 item">
  <h2>Item 1 </h2>
  <div class="image1 image"></div>
</div>
<div class="item2 item">
  <h2>Item 2 </h2>
  <div class="image2 image"></div>
</div>
<div class="item3 item">
  <h2>Item 3 </h2>
  <div class="image3 image"></div>
</div>

Answer 3

You can apply the same rules to a class also, then on click apply the class to the clicked item

You can also simplify the CSS like

var $items = $('.item').click(function() {
  $(this).addClass('clicked');
  $items.not(this).removeClass('clicked');
});

h2 {
  float: left;
}
.item {
  height: 100px;
  width: 100%;
}
.item:hover h2,
.item.clicked h2 {
  color: yellow;
}
.item:hover .image,
.item.clicked .image {
  background-color: #000;
}
.item .image {
  height: 80px;
  width: 80px;
  border-radius: 100px;
  border: 1px solid #000;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 20px;
  float: left;
}
/* item 1 */

.item1:hover .image,
.item1.clicked .image {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u579-r.png');
}
.item1 .image {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u579.png');
}
/* item 2 */

.item2:hover .image,
.item2.clicked .image {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u589-r.png');
}
.item2 .image2 {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u589.png');
}
/* item 3 */

.item3:hover .image,
.item3.clicked .image {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u599-r.png');
}
.item3 .image {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u599.png');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hover on me</h1>

<div class="item1 item">
  <h2>Item 1 </h2>
  <div class="image1 image"></div>
</div>

<div class="item2 item">
  <h2>Item 2 </h2>
  <div class="image2 image"></div>
</div>

<div class="item3 item">
  <h2>Item 3 </h2>
  <div class="image3 image"></div>
</div>

---

With your rules set

var $items = $('.item1,.item2,.item3').click(function() {
  $(this).addClass('clicked');
  $items.not(this).removeClass('clicked');
});

h2 {
  float: left;
}
/* item 1 */

.item1 {
  height: 100px;
  width: 100%;
}
.item1:hover h2,
.item1.clicked h2 {
  color: yellow;
}
.item1:hover .image1,
.item1.clicked .image1 {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u579-r.png');
  background-color: #000;
}
.image1 {
  height: 80px;
  width: 80px;
  border-radius: 100px;
  border: 1px solid #000;
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u579.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 20px;
  float: left;
}
/* item 2 */

.item2 {
  height: 100px;
  width: 100%;
}
.item2:hover h2,
.item2.clicked h2 {
  color: yellow;
}
.item2:hover .image2,
.item2.clicked .image2 {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u589-r.png');
  background-color: #000;
}
.image2 {
  height: 80px;
  width: 80px;
  border-radius: 100px;
  border: 1px solid #000;
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u589.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 20px;
  float: left;
}
/* item 3 */

.item3 {
  height: 100px;
  width: 100%;
}
.item3:hover h2,
.item3.clciked h2 {
  color: yellow;
}
.item3:hover .image3,
.item3.clicked .image3 {
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u599-r.png');
  background-color: #000;
}
.image3 {
  height: 80px;
  width: 80px;
  border-radius: 100px;
  border: 1px solid #000;
  background-image: url('http://demo.musemaster.net/Clu/Clu-1/images/u599.png');
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 20px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hover on me</h1>

<div class="item1">
  <h2>Item 1 </h2>
  <div class="image1"></div>
</div>

<div class="item2">
  <h2>Item 2 </h2>
  <div class="image2"></div>
</div>

<div class="item3">
  <h2>Item 3 </h2>
  <div class="image3"></div>
</div>