悬停期间更改 Div 的边框 [关闭]答案

【问题标题】：Change Div's Border During Hover [closed]悬停期间更改 Div 的边框 [关闭]
【发布时间】：2016-03-23 16:49:44
【问题描述】：

我有一个简单的 div。

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

我使用下面的代码使其边框透明：

var sample_div =  document.getElementById('sample');
sample_div.style.borderColor = 'transparent';

当鼠标指针悬停时，我想将 div 的边框设为蓝色。下面是我的css代码：

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

}

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

【问题讨论】：

#sample_div:hover{ ==> #sample:hover {
内联样式更倾向于使用class 或使用!important
@Tushar --> 我在帖子中输入错误。问题仍然没有改变。

标签： javascript html css hover

【解决方案1】：

您的 ID 不匹配。尝试如下：

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

【讨论】：

【解决方案2】：

您不需要 JS 并且您的 ID 不匹配。

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

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

http://codepen.io/anon/pen/zrqYZy

【讨论】：

【解决方案3】：

div#sample:hover{ 
    border: 1px solid blue !important;
}

//使用 !important

【讨论】：

【解决方案4】：

在#sample 中添加border:0 而不是使用javascript 做同样的事情。

#sample {
  width: 50px;
  height: 50px;
  background-color: lightgrey;
  border: 0;
}
#sample:hover{ 
    border: 1px solid blue;
    border-color: blue;
}

&lt;div id="sample"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

你只能用 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 方面不是那么先进，但它可以工作。

【讨论】：

【解决方案6】：

因为您使用 JavaScript 设置了 border-color，所以它变成了内联样式 <div id="sample" style="border-color: transparent;"></div>。

内联样式的specificity 高于 :hover 伪类的特异性。所以border-width 和border-style 是由:hover 设置的，但border-color 仍然会被你用JavaScript 设置的内联样式（透明）覆盖。

要使其正常工作，可以通过添加 !important 使用 css 提高规则的特异性，或者放弃 JavaScript 并通过 CSS 设置初始样式，这样特异性就不再是问题了。

【讨论】：