悬停期间更改Div的边框

我有一个简单的div.

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

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

当鼠标指针处于悬停状态时,我想将div的边框设为蓝色.以下是我的css代码:

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

}

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

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

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

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

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

添加border:0的#sample,而不是做使用JavaScript一样.

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