Question

我遇到on（）和off（）的问题。我创建了一个导航栏，当你将鼠标放在它上面时，或者当它是最后一个点击时，我希望div为蓝色。

因此我使用了mouseenter / mouseleave（因为我希望颜色逐渐变化）和我使用off（）和on（）就像点击div（因为最后一个）不应该随mouseenter / mouseleave改变

问题在于，当我点击div之后，我在mouseenter（）mouseleave（）事件之下的代码不会再发生了，有人可以帮我这个吗？我使用了重要性符号，但它不起作用，我真的想继续使用jquery和mouseenter / mouseleave功能。提前谢谢！

$('.blok_nav').mouseenter(function(){
    $(this).animate(
        {backgroundColor: "blue", color: "red" }, { duration: 200, queue: false });
}   )

$('.blok_nav').mouseleave(function(){
    $(this).animate(
        {backgroundColor: "red", color: "blue" }, { duration: 200, queue: false });
}   )

$('.blok_nav').click(function(){
    $('blok_nav').not(this).on().css("background-color", "red").css("color", "blue")
        $(this).off('mouseenter').off('mouseleave').css("background-color", "green").css("color", "red")
})

Answer 1

您可以使用css transitions来实现您想要的效果，然后在单击某个元素以突出显示该元素并删除过渡时应用类

CSS

.block_nav {
  float:left;
  width:25%;
  text-align:center;
  vertical-align: middle;
}

.highlighted {
  color:white;
  background:green;
}

.blok_nav:not(.highlighted){
  color:blue;
  background-color:red ;
}

.blok_nav:not(.highlighted):hover {
  background-color: blue; 
  transition: background-color 500ms linear;
  color: red;
  transition: color 500ms linear; 
}

JQUERY

$('.blok_nav').click(function() {
  $('.blok_nav').removeClass('highlighted');
  $(this).addClass('highlighted');
});

Refer fiddle

注意：早期版本的IE

不支持transition

使用jQuery创建navbar：背景问题

1 个答案: