CODEWITHSUNDEEP
javascripthtmldom-events
Jay
Jay

Reputation: 5074

JavaScript Changing HTML's CSS Attributes in the 'onmouseover' event

I need to change the border color of my HTML <li> element when the user takes the cursor over the item and also to change the cursor icon when the mouse is over the item. I tried this, but it says "syntax error"

HTML

<li class="post-item-parent-div" onmouseover="onItemHover(this)" >
    <!-- More HTML Code -->
</li>

Javascript

function onItemHover(x) {

    x.border-top = "12px solid #0084FD";
    x.border-left = "12px solid #0084FD";
    x.cursor = "pointer";
}

I'm very new to JavaScript, so please help out :)

Upvotes: 2

Views: 1800

Answers (4)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to change the css property names like below, as the style names with - can't be directly used in javascript.

See CSS Properties Reference for the reference names of css properties in javacsript

function onItemHover(x) {
  x.style.borderTop = "12px solid #0084FD";
  x.style.borderLeft = "12px solid #0084FD";
  x.style.cursor = "pointer";
}
<ul>
  <li class="post-item-parent-div" onmouseover="onItemHover(this)">
    some code
  </li>


</ul>

But also note that the mouseover event will get triggered when you move to another element within the same parent li, so you might consider using the mouseenter event

function onItemHover(x) {
  snippet.log('on over')
}

function onEnter(x) {
  snippet.log('on enter');
  
  x.style.borderTop = "12px solid #0084FD";
  x.style.borderLeft = "12px solid #0084FD";
  x.style.cursor = "pointer";
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<ul>
  <li class="post-item-parent-div" onmouseover="onItemHover(this)" onmouseenter="onEnter(this)">
    some code <span>in span</span>  <a href="#">in link</a>
  </li>

</ul>

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add this code

    var item = document.getElementById("button");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func()
{  // not needed since item is already global, 
   // I am assuming this is here just because it's sample code?
   // var item = document.getElementById("button"); 
   item.setAttribute("style", "background-color:blue;")
}

function func1()
{  
   item.setAttribute("style", "background-color:green;")
}

Upvotes: 1

Beroza Paul
Beroza Paul

Reputation: 2117

This will do: 

function onItemHover(x) {
   x.setAttribute("style", "border-top: 12px solid #0084FD; border-left: 12px solid #0084FD;cursor:pointer;");
}

Upvotes: 1

Steve
Steve

Reputation: 9561

Why not use the :hover selector?

li.post-item-parent-div:hover
{
    border-top: 12px solid #0084FD;
    border-left: 12px solid #0084FD;
    cursor: pointer;
}

JSFiddle example: https://jsfiddle.net/zt66jf39/

Upvotes: 2

Related Questions