较短的jQuery代码

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

---

在id为menubar1、menubar2等的悬停div元素上。我想使用clasi1、clasi2等类向该div下的p元素添加css属性（填充顶部和不透明度）。

较短的javascript？零听起来怎么样

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

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

也就是说，如果您正在做一些纯CSS无法完成的事情，例如单击处理程序，类选择器而不是单个ID将更易于重用：

$('.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
    });
});

---

“如果有办法让它变得更短、更有活力”是的。类名选择器。看起来你可以用CSS中的

：hover

选择器将其全部清除。我刚刚在CSS中添加了div.menubar:hover p.clasi{}，这很简单，但我是盲目的idkThanks。5分钟前，我看到了它并在css中进行了更改

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