Currently, I am a beginner in jquery and still in the learning phase. Although my existing code is functional and achieving the desired outcome, it feels lengthy and inefficient. I am seeking a way to streamline it and make it more dynamic. Specifically, there are 6 div elements involved.
<header>
<div id="menubar1" class="menubar one">
<p class="place"><i id="icon" class="fa fa-apple fa-5x label"></i></p>
<p id="clasi1" class="clasi">text</p>
</div>
<div id="menubar2" class="menubar six">
<p class="place"><i id="icon" class="fa fa-facebook fa-5x label"></i></p>
<p id="clasi2" class="clasi">text</p>
</div>
<div id="menubar3" class="menubar three">
<p class="place"><i id="icon" class="fa fa-pencil fa-5x label"></i></p>
<p id="clasi3" class="clasi">text</p>
</div>
</header>
// Additional div elements beyond these 3
Furthermore, each of these div elements also has associated jQuery code (plus 4 more).
$('#menubar1').on("mouseover", function() {
$('#clasi1').css({
'paddingTop': '35px',
'opacity': 1
});
}).on("mouseleave", function() {
$('#clasi1').css({
'paddingTop': '10px',
'opacity': 0.6
});
});
$('#menubar2').on("mouseover", function() {
$('#clasi2').css({
'paddingTop': '35px',
'opacity': 1
});
}).on("mouseleave", function() {
$('#clasi2').css({
'paddingTop': '10px',
'opacity': 0.6
});
});
The objective is to modify the CSS properties (padding-top and opacity) of the p element with class clasi1, clasi2, etc., under the respective menubar1, menubar2 div upon hovering over them.