кратък jQuery код - jquery, html, css

Аз съм нов за jquery и все още се учи. Кодът, който правя сега работи и прави това, което искам, освен че е твърде дълго и неефективно Чудех се дали има начин да го направим по-кратък и по-динамичен.Има 6 елемента div

    <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>

// има още 3 елемента div

и jquery код за всеки div (и има още 4)

  $("#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
});
});

На hover div елемент с id menubar1, menubar2 и т.н. Искам да добавите css свойства (padding-top и непрозрачност) на p елемент под този div с клас clasi1, clasi2 и т.н.

Отговори:

По-кратък javascript? Как звучи нулево?

.menubar .clasi {
paddingTop: 10px;
opacity: 0.6;
}

.menubar:hover .clasi {
paddingTop: 35px;
opacity: 1;
}

Това означава, че ако правите нещо, което не би могло да бъде направено в чист CSS, например, клавишите за избор на клавиши, вместо индивидуалните идентификатори, ще бъдат повторно използвани:

$(".menubar").on("click", function() {
// "this" is now the .menubar which was moused over.
// $(this).find() will return matching nodes inside it:
$(this).find(".clasi").css({
// etc
})
});

Можете да опитате:

$(".menubar")
.on("mouseenter", function(){
$(this).find(".clasi").css({
paddingTop: "35px",
opacity: 1
});
})
.on("mouseleave", function(){
$(this).find(".clasi").css({
paddingTop: "10px",
opacity: 0.6
});
});