Javascript 更改Div'；悬停时的边界

我有一个简单的div

<div id="sample"></div>

我想在鼠标指针悬停时使div的边框变为蓝色。下面是我的css代码：

#sample:hover{ 
    border: 1px solid blue;
    border-color: blue;

}

---

我的css代码不工作。当鼠标指针悬停时，它不会改变颜色。它保持透明。为什么？

您的id不匹配。请尝试以下操作：

#sample:hover{ 
    border: 1px solid blue;
    border-color: blue;
}

---

你不需要JS&你的id不匹配

#sample{
  background: #eee;
  height: 30px;
  width: 40px;
  border: 1px solid transparent;
}

#sample:hover{ 
    border-color: blue;
}

---

//使用！重要信息

在

#示例

中添加

边框：0

，而不是使用javascript执行相同操作

#示例{
宽度：50px；
高度：50px；
背景颜色：浅灰色；
边界：0；
}
#示例：悬停{
边框：1px纯蓝色；
边框颜色：蓝色；
}

---

您只能使用CSS来完成此操作。如果您想使用JS来完成此操作，它将如下所示

document.addEventListener("DOMContentLoaded",function(){

    var element = document.getElementById('sample');
    element.addEventListener('mouseenter',changeBorder);
});

function changeBorder(){
    document.getElementById('sample').style.border = '5px solid orange';
}

---

我对JS不是很在行，但它很管用。

因为你用JavaScript设置了

边框颜色，它变成了一种内联样式

内联样式的属性比：hover伪类的属性更高。因此
边框宽度
和
边框样式
由
：hover
设置，但
边框颜色
仍由JavaScript设置的内联样式（透明）覆盖

要使其工作，可以通过添加
，提高css规则的特殊性！重要信息
或放弃JavaScript并通过CSS设置初始样式，这样特殊性就不再是问题了。
#sample#div:hover{
=>
#sample:hover{
内联样式更受欢迎，请改用
类
，或者使用
！important
@Tushar-->我在帖子中键入错误。问题仍然没有改变。
div#sample:hover{ 
    border: 1px solid blue !important;
}

document.addEventListener("DOMContentLoaded",function(){

    var element = document.getElementById('sample');
    element.addEventListener('mouseenter',changeBorder);
});

function changeBorder(){
    document.getElementById('sample').style.border = '5px solid orange';
}