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代码不起作用。当鼠标指针悬停时，它不会改变颜色。它保持透明。为什么呢？

Answer 1

你不需要JS＆amp;你的身份证不匹配。

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

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

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

Answer 2

在border:0中添加#sample，而不是使用javascript执行相同操作。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

//使用！important

Answer 4

你的身份证不匹配。请尝试以下方法：

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

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，但它确实有用。

Answer 6

因为您使用JavaScript设置了[PFObject]?，所以它变为内联样式[CustomObject]。

内联样式的specificity比更高。因此border-color和<div id="sample" style="border-color: transparent;"></div>由border-width设置，但border-style仍然被您使用JavaScript设置的内联样式（透明）覆盖。

要使其工作要么通过添加:hover来使css的特异性更高，要么放弃JavaScript并通过CSS设置初始样式，这样特异性就不再是问题了。

在悬停期间更改Div的边框

6 个答案: