How do I make an HTML border change color with the mouseover event in JavaScript?

Question

I am trying to make some images on my website be more interactive. I want to have it where the bottom border changes color when the mouse moves over it. This is what I currently have:

 function bigImg(x) { x.border-bottom-color = "#00ff00"; } function normalImg(x) { x.border-bottom-color = "black"; } 

What am I doing wrong?

Answer 1

function bigImg(x) {
    x.style.borderBottomColor= "#00ff00";
}

function normalImg(x) {
x.style.borderBottomColor= "black";
} 

To use style within javascript use .style after your element then start the CSS property with small letter word then each word with capital letter

Answer 2

<style>
  div.mouseOverUnderline {
    border-bottom: 1px solid black;
  }
  div.mouseOverUnderline:hover {
    border-bottom: 1px solid red
  }
</style>
<div class="mouseOverUnderline">here is my mouseover effect<div>

here is a working fiddle: https://jsfiddle.net/5swwu091/

Answer 3

if you really need to JavaScript then already you have solution on other answer. But there is a alternative solution using css . Check the below css you can use this class for which one is normal or which one img is big.

 img.bigImg:hover{ border-bottom: 1px solid #00ff00; } img.normalImg:hover{ border-bottom: 1px solid black; } 

  <img class="bigImg" src="http://aven-sys.com/wp-content/uploads/2016/03/demo.jpg"> <br><br> <img class="normalImg" src="http://aven-sys.com/wp-content/uploads/2016/03/demo.jpg">