Question

当我在元素上放置.hover并将光标移离该元素时，悬停效果将保持激活状态。

我通过使用“ mouseover”和“ mouseleave”解决了这个问题。但是随后，当您单击该元素并更改了某些css时，由于此先前的命令，它将在鼠标离开时更改。

我想知道什么是解决此问题的最佳方法。我可以使用多个“类删除”命令，但是如果仍然知道如何解决悬停效果的卡住，麻烦就少得多了！

我通过使用“ mouseover”和“ mouseleave”解决了这个问题。但是随后，当您单击该元素并更改了某些css时，由于此先前的命令，它将在鼠标离开时更改。

<script type="text/javascript">

$j=jQuery.noConflict();

jQuery('.mkb').click(function(){
  jQuery('.mkb p').css('opacity','1 !important');
  jQuery('.mkb img').css('filter','brightness(75%) !important');


  });



/* ALS JE OP MKB hovered */
jQuery('.mkb').hover(function(){
  jQuery('.mkb p').css('opacity','1');
  jQuery('.mkb img').css('filter','brightness(75%)');

  });


/* ALS JE OP ZORG hovered */
jQuery('.zorg').mouseover(function(){
  jQuery('.zorg p').css('opacity','1');
  jQuery('.zorg img').css('filter','brightness(75%)');

 });

jQuery('.zorg').mouseleave(function(){
  jQuery('.zorg p').css('opacity','0');
  jQuery('.zorg img').css('filter','brightness(100%)');

  });

/* ALS JE OP catering hovered */
jQuery('.catering').mouseover(function(){
  jQuery('.catering p').css('opacity','1');
  jQuery('.catering img').css('filter','brightness(75%)');

  });

jQuery('.catering').mouseleave(function(){
  jQuery('.catering p').css('opacity','0');
  jQuery('.catering img').css('filter','brightness(100%)');

  });

/* ALS JE OP horeca hovered */
jQuery('.horeca').mouseover(function(){
  jQuery('.horeca p').css('opacity','1');
  jQuery('.horeca img').css('filter','brightness(75%)');

  });

jQuery('.horeca').mouseleave(function(){
  jQuery('.horeca p').css('opacity','0');
  jQuery('.horeca img').css('filter','brightness(100%)');

  });

Answer 1

您似乎并没有还原hover()应用的CSS。 jQuery documentation显示该函数带有2个参数

.hover（handlerIn，handlerOut）

及其提供的示例

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

所以你应该做的是这样的：

jQuery('.mkb').hover(
  function(){
    jQuery('.mkb p').css('opacity','1');
    jQuery('.mkb img').css('filter','brightness(75%)');
  }, function(){
    jQuery('.mkb p').css('opacity','0');
    jQuery('.mkb img').css('filter','brightness(0%)');
  }
);

如何解决.hover效果滞留问题

1 个答案: