悬停时改变Div的边框

Question

我有一个简单的div。

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

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

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

当鼠标悬停时，我希望将div的边框变为蓝色。以下是我的CSS代码：

div:hover {
  border: 1px solid blue;
}

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

}

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

- user4621642

---

#sample_div:hover{ 翻译为 #sample:hover {。 - Tushar

更倾向于使用内联样式，建议使用类(class)替代，或者使用!important。 - Vitorino fernandes

@Tushar --> 我在帖子中打错了。问题仍然没有改变。 - user4621642

Answer 1

你不需要使用JS，并且你的ID也不匹配。

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

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

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

- Paul Redmond

Answer 2

在 #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>

- Noopur Dabhi

Answer 3

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

//use !important

- Abraham Sankutty

Answer 4

您的id不匹配。请尝试以下方法：

您的id不匹配。请尝试以下方法：

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

- Arun Kumar M

Answer 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不是很高级，但它可以工作。

- Nasco.Chachev

Answer 6

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

内联样式的特殊性比:hover伪类的特殊性更高。因此，:hover设置的border-width和border-style会被应用，但是你使用JavaScript设置的内联样式（透明）仍然会覆盖border-color。

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

- user7673225