在悬停 CSS 上删除活动类

Question

如何将鼠标悬停在导航上时删除活动类。这是我的代码

<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[1])) echo 'class="active"';?>><?php echo '<a href="'.$navlink[1].'">',$navdesc[1] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[2])) echo 'class="active"';?>><?php echo '<a href="'.$navlink[2].'">',$navdesc[2] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[3])) echo 'class="active"';?>><?php echo '<a href="'.$navlink[3].'">',$navdesc[3] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[4])) echo 'class="active"';?>><?php echo '<a href="'.$navlink[4].'">',$navdesc[4] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[5])) echo 'class="active"';?>><?php echo '<a href="'.$navlink[5].'">',$navdesc[5] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[6])) echo 'class="active"';?>><?php echo '<a href="'.$navlink[6].'">',$navdesc[6] ?></a></li>

Answer 1

你可以

用jQuery做到这一点，但我建议你只在css（.active：hover）中使用：hover并覆盖你想要的样式。

Answer 2

你可以从jQuery中使用这样的东西：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

http://api.jquery.com/hover/

你可以使用这样的东西：

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

Answer 3

您可以使用css的:Hover属性，这是最简单的方法，也可以您可以使用以下 jquery 添加或删除类，

$('#elm').hover(
       function(){ $(this).addClass('active') },
       function(){ $(this).removeClass('active') }
)

其中#elem是元素的 id，只需将任何 id 交给您的<li>，

然后，您可以添加或删除任何类。

更新

<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[1])) echo 'class="active lihover"';?>><?php echo '<a href="'.$navlink[1].'">',$navdesc[1] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[2])) echo 'class="active lihover"';?>><?php echo '<a href="'.$navlink[2].'">',$navdesc[2] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[3])) echo 'class="active lihover"';?>><?php echo '<a href="'.$navlink[3].'">',$navdesc[3] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[4])) echo 'class="active lihover"';?>><?php echo '<a href="'.$navlink[4].'">',$navdesc[4] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[5])) echo 'class="active lihover"';?>><?php echo '<a href="'.$navlink[5].'">',$navdesc[5] ?></a></li>
<li  <?php if (strpos($_SERVER['PHP_SELF'], $navserver[6])) echo 'class="active lihover"';?>><?php echo '<a href="'.$navlink[6].'">',$navdesc[6] ?></a></li>

然后使用 ，

<script>
$('.lihover').hover(          
       function(){ $(this).removeClass('active') }
)
</script>