The correct way to do this would be with CSS, and I have listed the CSS solution below. However first will answer with the javascript solution.
Please see a JS Fiddle of the results:
- JavaScript version: http://jsfiddle.net/Nh8xM/1/
- CSS version:http://jsfiddle.net/53X25/
Javascript Solution
Simplify your HTML to just use .caption instead of .caption1,2,3,4 and .color-img instead of 1,2,3,4:
<section>
<h2>Color combination should be following:</h2>
<ul class="colors">
<li class="color-img">
<img src="img/1.png" />
<div class="caption">
#FFD800
</div>
</li>
<li class="color-img">
<img src="img/2.png" />
<div class="caption">
#FFD800
</div>
</li>
<li class="color-img">
<img src="img/3.png" />
<div class="caption">
#587498
</div>
</li>
<li class="color-img">
<img src="img/4.png" />
<div class="caption">
#E86850
</div>
</li>
</ul>
</section>
And change your javascript like so - comments inline explaining what it does:
$( document ).ready(function() {
$('.caption').hide();
//use .on (and mouseover) syntax over .hover
$(".color-img").on("mouseover", function () {
//find child element .caption, and show
$(this).find('.caption').show();
});
});
Result: http://jsfiddle.net/Nh8xM/1/
CSS Solution
Use the simplified HTML as per the javascript version, but in CSS all you would need to do is have:
.caption {
display:none;
}
.colors li:hover .caption {
display:block;
}
Result: http://jsfiddle.net/53X25/