I am experiencing an issue with the hover function. Here is an example:
<a href="http://jsfiddle.net/sushanth009/YeBMA/1/">Click here </a>$('.curtain').hover(function() {
var $container = $(this).closest('div.container');
$container.find('.containerLeft').addClass('lefthover');
$container.find('.containerRight').addClass('righthover');
}, function() {
var $container = $(this).closest('div.container');
$container.find('.containerLeft').removeClass('lefthover');
$container.find('.containerRight').removeClass('righthover');
});.lefthover {
border: 2px solid green;
}
.righthover {
border: 2px solid orange;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />
</div>
<div class="container">
<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />
</div>
<div class="container">
<img class="curtain containerLeft" src="http://example.com/containerleft.jpg" />
<img class="curtain containerRight" src="http://example.com/containerright.jpg" />
</div>When I hover over an image, a class should be added and then removed, but instead the class gets added multiple times automatically.
Could anyone provide assistance?