javascript - Dynamically changing UL style -

i'm having unordered list few "li" elements. idea highlight current "li" in focus(onhover).

using code this

li[i].onmouseover = function() {     this.style.backgroundcolor = 'lime';     this.style.borderleft='5px solid red';     this.style.liststyle = 'square'; }; 

here's working fiddle

i want left border appear on hovered element, happening in fiddle. seems shift text towards right. how rid of jumping text behavior?

my next question can create our own symbols ul. toggling between square , disc. possible have fancy icons on each "li"?

here solution.

the html:

<h1>introduction dom</h1> <p class="test">there number of reasons why dom awesome, here some:</p> <ul> <li id="everywhere">it can found everywhere.</li> <li class="test">it's easy use.</li> <li class="test">it can find want, quickly.</li> </ul> 

the javascript:

var li = document.getelementsbytagname("li"); ( var = 0; < li.length; i++ ) {     li[i].onmouseover = function() {         this.style.backgroundcolor = 'lime';         this.style.borderleft='5px solid red';         this.style.liststyle = 'square';     };     li[i].onmouseout = function() {         this.style.backgroundcolor = 'white';         this.style.borderleft='';         this.style.liststyle = 'disc';     }; } 

the css:

ul li {line-height:30px; padding-left: 10px; border-left:5px solid transparent;} #element {     background: linear-gradient(top, black 0%, white 100%); } 

hope helps.