Question

我有一个菜单，当我悬停在它上面时我想打开每一个li但是我的jquery代码不能正常工作，我尝试用css但是整个菜单都打开了。

＆＃13;

$("ul.sideBarMenuLinks li").mouseover(function() {
  $('this').each(function() {
    $(this).css(' margin-left', '0');
  });
});

＆＃13;

ul.sideBarMenuLinks li {
  margin-bottom: 5px;
  transition: 0.5s;
  margin-left: -116px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sideBarMenuLinks">
  <li>
    <div><a class="sideBarMenuLink" href="#"><span class="image"><i class="icon-home"></i> </span> <span class="text">Home Page</span> </a></div>
  </li>
  <li>
    <div><a class="sideBarMenuLink" href="#"><span class="image"><i  class="icon-user"></i> </span> <span class="text">Register</span> </a></div>
  </li>
</ul>

＆＃13;

Answer 1

试试这个

JS

$("ul.sideBarMenuLinks li").mouseover(function() {
    $(this).css('margin-left','0');
});

希望这会有所帮助..

Answer 2

仅限css：

ul.sideBarMenuLinks li:hover {
  Your code style...
}

ul.sideBarMenuLinks li {
  margin-bottom:5px;
  transition:0.5s;
  margin-left:0px;

}

ul.sideBarMenuLinks li:hover {
  margin-left:100px;
}

<ul class="sideBarMenuLinks">  

  <li>
      <div><a class="sideBarMenuLink" href="#"  ><span class="image"><i class="icon-home"></i> </span> <span class="text">Home Page</span> </a></div>
  </li>

  <li>
      <div><a class="sideBarMenuLink" href="#"><span class="image"><i  class="icon-user"></i> </span> <span class="text">Register</span> </a></div>
  </li>
</ul>

Answer 3

您只需将mouseover()个事件附加到每个li，然后将css()添加到其中。

$("ul.sideBarMenuLinks li").mouseover(function () {   
    $(this).css('margin-left', '0');
});

ul.sideBarMenuLinks li{
    margin-bottom:5px;
    transition:0.5s;
     margin-left:116px;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sideBarMenuLinks">      
  <li>
   <div>
      <a class="sideBarMenuLink" href="#">
      <span class="image">
          <i class="icon-home"></i> 
      </span> 
      <span class="text">Home Page</span>
      </a>
    </div>
  </li>  
  <li>
   <div>
        <a class="sideBarMenuLink" href="#">
          <span class="image">
            <i  class="icon-user"></i> 
          </span> 
          <span class="text">Register</span> 
        </a>
     </div>
  </li>
</ul>

Answer 4

试试这个，

$("ul.sideBarMenuLinks li").mouseover(function () {   

                        $(this).css(' margin-left', '0');

                });

Answer 5

使用def field = rootNode.api."${xmlTag[dataSort]}" def field = rootNode.'**'.find{it.name() == xmlTag[dataSort] }关联hover和mouseover事件

mouseout

如何用鼠标悬停打开evey li

5 个答案: