hover失效问题

项目场景：

昨天在给学弟考核的时候，他的页面出现了一点小问题，就是某一个input框的hover在执行完点击事件之后，就失效了。

---

问题描述

他出问题部分的html代码如下

<input type="text" id="inputOne" value="搜索" name="keyword" autocomplete="off">

css代码如下

input {
   height: 45px;
   width: 245px;
   outline: none;
   border: 1px solid #999;
   margin-right: -1px;
}
#inputOne {
  color: rgb(126, 126, 126);
  font-size: 14px;
  padding-left: 10px;
}
#inputOne:hover {
   border: 1.5px solid #999;
}

js代码如下

// 边框聚焦显现部分
    var inputOne = document.getElementById('inputOne');
    inputOne.addEventListener('focus', function() {
        inputOne.style.border = '1px solid #FF6700';
    })
    inputOne.addEventListener('blur', function() {
        inputOne.style.border = '1px solid #999';
    })

 初始效果是这样的，

当鼠标悬浮后会变成这样，即边框加粗了

点击input框之后，效果是这样的，就是边框的颜色会改变。但是问题是，当点击了input框之后，失去焦点恢复初始效果图样式后，无论怎么操作，都无法触发鼠标悬浮特效了。

---

原因分析：

这是因为在他的js代码中，是通过对style操作来改变input框的样式的。这样添加的样式相当于改变input框的内联样式，即相当于<input   style="height=200px">由于内联样式的优先级最高，就会导致hover之后虽然做出相应变动，但是因优先级问题无法起作用。

---

解决方案：

既然知道了是优先级的问题，那么就方便进行对应的操作了。可以进行的更改有两种。他们分别如下：

1.不再通过对style的操作来改变元素的样式，可以改用其他方法，比如增减class之类的。

2.在css的hover后的样式中，加上!important，来提高该样式的优先级，使其展示出来。