Question

我想对元素应用4种效果：

将鼠标悬停在元素上。
悬停在元素上。
关注元素。
模糊。

但是发生了冲突，当我专注于元素时，悬停进出运行，当我点击元素外部时，模糊应该发生的效果不会发生，我认为它是＆＃39;是因为徘徊。

＆＃13;

var el = $('input');

el.focus(function() {
  el.css('border', '1px solid green');
});

el.hover(function() {
  el.css('border', '1px solid green');
}, function() {
  el.css('border', '1px solid grey');
});

el.blur(function() {
  if (el.val == '') {
    el.css('border', '1px solid red');
  } else {
    el.css('border', '1px solid grey');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />

＆＃13;

悬停在边框颜色变为绿色时，在悬停时会变为灰色。但是在关注输入时，颜色是灰色而不是绿色，而在模糊时它的灰色也不是红色。

Answer 1

问题是由if条件中的逻辑引起的。 el.val返回函数的引用，它永远不会等同于空字符串。您需要使用el.val()来获取控件的实际值：

var el = $('input');

el.focus(function() {
  el.css('border', '1px solid green');
});

el.hover(function() {
  el.css('border', '1px solid green');
}, function() {
  el.css('border', '1px solid grey');
});

el.blur(function() {
  if (el.val() == '') {
    el.css('border', '1px solid red');
  } else {
    el.css('border', '1px solid grey');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />

话虽如此，我建议在可能的情况下将CSS规则与此结合使用，并且肯定使用类来将样式规则与JS代码紧密地结合在一起。像这样：

var el = $('input');
el.blur(function() {
  $(this).toggleClass('empty', $(this).val().trim() === '');
});

input {
  outline: 0;
  border: 2px solid grey;
}
input:hover,
input:focus {
  border: 2px solid green;
}

input.empty {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type='text' />

悬停，聚焦和模糊冲突

1 个答案: