悬停，重点和模糊冲突

Question

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

1. 悬停在元素上。
2. 偏离元素。
3. 专注于元素。
4. 在模糊。

但是发生了冲突，当我专注于悬停在和耗尽的元素上时，当我在元素外面单击元素时，应发生的效果不会发生，我认为这是因为悬停。

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

在边框悬停时，呈绿色，悬停在悬停时变成灰色。但是专注于输入时，颜色不是灰色，而在模糊中，它也不是红色。

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