Changing Div Border during Hover

Question

I have a simple div.

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

I made my border transparent using the following code:

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

I want the div border to be blue when the mouse pointer is in hover mode. Below is the css code:

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

}

My css code is not working. It does not change color on hover. It remains transparent. Why?

Answer 1

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

// use ! important

Answer 2

You do not need JS, and your identifiers do not match.

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

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

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

Answer 3

border:0 #sample , javascript.

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

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

Hide result

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

border-color JavaScript, <div id="sample" style="border-color: transparent;"></div>.

specificity , -: hover. , border-width border-style :hover, border-color - (), JavaScript.

To make it work, either raise the specification of the rule above with css by adding !importantor aligning JavaScript and setting the initial CSS style so that specificity is no longer a problem.