My jQuery code is working well, but I am facing one issue. After clicking on my infocontent menu, the hover effect on h1 is no longer working. How can I bring back the hover function?
Here is the HTML:
<div class="infocontent"><h1>What?</h1></div>
<div class="infocontent"><h1>From/ For whom?</h1></div>
<div class="infocontent"><h1>Actions</h1></div>
<div class="infocontent"><h1>With whom?</h1></div>
CSS style used:
.infocontent {
width: 120px;
height: 120;
float: left;
}
.infocontent h1 {
width: 100%;
font-size: 24px;
text-transform: uppercase;
color: #999;
}
.infocontent h1:hover { color: #000; }
The jQuery script being used:
$('.infocontent h1:first').css('color', '#000');
$(".infocontent h1").on("click", function() {
$('.infocontent h1').css('color', '#999');
$(this).css('color', '#000');
});