如何让元素在悬停时生长。通过使用javascript和CSS

Question

我想要编写一种特定的效果，当你将鼠标悬停在元素上时，它会“变大”。在您离开元素后，它将丢失添加的类。但我不能让它工作。

到目前为止，我得到的是：

​

$("container").hover(
  function() {
    $(this).addClass("active");
  },
  function() {
    $(this).removeClass("active");
  }
);

#scrollist {
  background: #808080;
  width: 1000px;
  height: 350px;
  float: left;
  margin: auto;
  padding-left: auto;
  padding-right: auto;
}
#scrlist {
  width: auto;
  margin: auto;
  list-style-type: none;
  padding-left: auto;
  padding-right: auto;
}
.container {
  width: 150px;
  height: 250px;
  margin: auto;
  float: left;
}
.active {
  width: 150px;
  height: 250px;
  margin: auto;
  float: left;
  -webkit-transition: height .19s, width .16s;
  -moz-transition: height .19s, width .16s;
  -o-transition: height .19s, width .16s;
  -ms-transition: height .19s, width .16s;
  transition: height .19s, width .16s;
}
.active:hover {
  width: 240px;
  height: 350px;
}
.n1 {
  width: 240px;
  height: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scrollist">
  <ul id="scrlist">
    <li>
      <a href="/" class="container" id="cont1"></a>
    </li>
    <li>
      <a href="/" class="container" id="cont2"></a>
    </li>
    <li>
      <a href="/" class="container n1" id="cont3"></a>
    </li>
    <li>
      <a href="/" class="container" id="cont4"></a>
    </li>
    <li>
      <a href="/" class="container" id="cont5"></a>
    </li>
  </ul>
</div>

​

Answer 1

您可以简单地切换类.active，如下所示

$(document).ready(function(){
  $(".container").hover(function(){
    $(this).toggleClass("active");
  });
});

See demo example here

Answer 2

使用鼠标悬停而不是悬停，并在容器前添加圆点。这应该是可行的：

$(function(){
  $(".container").mouseover(function(){
    $(this).addClass("active");        
  });
  $(".container").mouseleave(function(){
    $(this).removeClass("active");        
  });
});