CODEWITHSUNDEEP
phphtmlcssnavigation
user2990463
user2990463

Reputation: 21

Remove active class on hover CSS

How can I remove the active class when i hover on a navigation. Here is my code

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

Upvotes: 1

Views: 1368

Answers (3)

Rahmani
Rahmani

Reputation: 877

You can use something like this from jQuery:

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

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

You can use something like this:

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

Upvotes: 1

Ronak K
Ronak K

Reputation: 1567

You can use css's :Hover Property which is easiest way , and also You can add or remove class with the following jquery,

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

where #elem is the id of your element just give any id to your <li>,

and then you can add or remove any class.

update

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

Then use ,

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

Upvotes: 0

Rudi
Rudi

Reputation: 111

U can do so with jQuery, but I suggest you just use :hover in css (.active:hover) and override the styling u want.

Upvotes: 3

Related Questions