Javascript 如何修复。悬停效果粘滞

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

我通过使用“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%)');

  });

我想知道解决这个问题的最好办法是什么。我可以使用多个“class remove”命令，但如果知道如何修复悬停效果，那么麻烦就少多了

我通过使用“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%)');

  });

$j=jQuery.noConflict（）；
jQuery（'.mkb'）。单击（函数（）{
jQuery（'.mkb p'）.css（'opacity'，'1！important'）；
jQuery（'.mkb img'）.css（'filter'，'brightness（75%）！important'）；
});
/*ALS JE OP MKB悬停*/
jQuery（'.mkb'）.hover（函数（）{
jQuery（'.mkb p'）.css（'opacity'，'1'）；
jQuery（'.mkb img'）.css（'filter'，'brightness（75%））；
});
/*阿尔斯杰·奥普·佐尔格在空中盘旋*/
jQuery（'.zorg'）.mouseover（函数（）{
jQuery（'.zorgp'）.css（'opacity'，'1'）；
jQuery（'.zorg img'）.css（'filter'，'brightness（75%））；
});
jQuery（'.zorg'）.mouseleave（函数（）{
jQuery（'.zorgp'）.css（'opacity'，'0'）；
jQuery（'.zorg img'）.css（'filter'，'brightness（100%））；
});
/*艾尔斯杰餐饮公司停滞不前*/
jQuery（'.catering'）.mouseover（函数（）{
jQuery（'.p'）.css（'opacity'，'1'）；
jQuery（'.img'）.css（'filter'，'brightness（75%））；
});
jQuery（'.catering'）.mouseleave（函数（）{
jQuery（'.p'）.css（'opacity'，'0'）；
jQuery（'.img'）.css（'filter'，'brightness（100%））；
});
/*霍雷卡号在空中盘旋*/
jQuery（'.horeca'）.mouseover（函数（）{
jQuery（'.horeca p'）.css（'opacity'，'1'）；
jQuery（'.horeca img'）.css（'filter'，'brightness（75%））；
});
jQuery（'.horeca'）.mouseleave（函数（）{
jQuery（'.horeca p'）.css（'opacity'，'0'）；
jQuery（'.horeca img'）.css（'filter'，'brightness（100%））；
});

您似乎没有还原由

hover（）应用的CSS

。显示该函数接受2个参数

.悬停（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%)');
  }
);

---

你能做一把小提琴吗？请在你的问题中插入你的答案！没有代码，很难帮助您什么是

。悬停
？如果在CSS中使用
：hover
选择器，它将在没有javascript的情况下工作