在悬停期间更改 Div 的边框

Question

我有一个简单的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 代码不会 work.It 当鼠标指针悬停时不会改变颜色。它保持透明。为什么？

Answer 1

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

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

Answer 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

Answer 3

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

//使用!重要

Answer 4

在 #sample 中添加 border:0 而不是使用 javascript。

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

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

Answer 5

你可以用 CSS 做到这一点 only.If 你想用 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 不是很了解，但它确实有效。

Answer 6

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

内联样式的 specificity 比 :hover 伪 class 的特异性更高。因此 border-width 和 border-style 由 :hover 设置，但 border-color 仍被您使用 JavaScript 设置的内联样式（透明）覆盖。

为了让它起作用，要么通过添加 !important 使 css 的规则的特异性更高，要么放弃 JavaScript 并通过 CSS 设置初始样式，这样特异性不再是问题。

在悬停期间更改 Div 的边框

Change Div's Border During Hover

html

javascript

css

hover