Question

这似乎是一个简单的问题，但我想要做的是：

我有一个看起来像这样的CSS：

.menu-item:hover ul { height: 50px; }

像tis这样的项目：

<div class="menu-item">
    <h4><a href="#">About</a></h4>
    <ul>
        <li><a href="#">Biography</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

当h4项目悬停时，我想将CSS属性设置为某个值，比方说300px。当鼠标离开时，我想将其重置为50px。

Answer 1

h4:hover { height:300px; }

CSS中的伪元素，不需要Javascript。

Answer 2

您可以直接使用CSS：

.menu-item h4:hover  { height: 300px; }
.menu-item h4 { height: 50px; }

如果你想使用jQuery，你可以这样做：

  $(".menu-item h4").hover(  function(){
   //Mouse Enter
      $(this).css({
        "height": "300px"
      });
   },
   //Mouse Leave
   function(){
      $(this).css({
        "height": "50px"
      });
   } 
}

Answer 3

使用jQuery你可以简单地完成它并做下面的事情。

$( "h1" ).hover(function() {
  $( this ).toggleClass( "increase", 1500, "easeOutSine" );
});

h1 {
  background-color: green;
  text-align: center;
}
.increase {
  color: red;
  height: 150px;
  color: white;
  line-height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> change on hover </h1>

注意：我添加了一些专有权，只是为了让高度增加可见。我也更喜欢 .ddClass ，因为 .CSS 会为您的文档添加内联CSS。

如何用jQuery更改CSS属性？

3 个答案: