CODEWITHSUNDEEP
javascript
xRobot
xRobot

Reputation: 26567

Is there a way to show these hidden element with mouseover?

In my html code I have a list of these <li> elements:

<li class="liitem" id="183"><span><a href="http://www.google.it"> Google </a> </span><br>
<ul><li><span><a href="http://www.gmail.com" target="_blank">gmail.com</a> </span><span id="183" style="float:right;display:none;"><a href="">delete</a></span></li></ul></li>

I want this:
When there is a mouseover on a <li> element of the "liitem" class, then set display:block of the span with the same id ( 183 in this case ).

I have writed this code but it's incomplete and I don't know how to do:

var elms = document.getElementsByTagName('li');

for (var i = 0; i < elms.length; i++){
  if (elms[i].getAttribute('class') === 'liitem'){

    elms[i].onmouseover = function(){
      //set display:block
    }

    elms[i].onmouseout = function(){
      //set display:none
    }

  }
}

Upvotes: 0

Views: 142

Answers (2)

Manuel
Manuel

Reputation: 10303

You can do this:

elms[i].style.display = "block";

and 

elms[i].style.display = "none";

Upvotes: 0

david
david

Reputation: 4278

you have set an id with the same value id should be unique. so you could add a value to the id to make it diferent for the liitem's id. like.

Just make sure there is no space to be safe between the a and span.

<ul>
<li class="liitem" id="183"><span><a href="http://www.google.it"> Google </a> </span><br>
<ul><li><span><a href="http://www.gmail.com" target="_blank">gmail.com</a></span><span style="float:right;display:none;"><a href="">delete</a></span></li></ul>
<ul><li><span><a href="http://www.google.com" target="_blank">docs</a></span><span style="float:right;display:none;"><a href="">delete</a></span></li></ul>
</li>
</ul>

.

var elms = document.getElementsByTagName('li'),
emls_len = elms.length;

for (var i = 0; i < emls_len; i++){

if (elms[i].className == 'liitem'){

var arr_sub_uls = document.getElementById(elms[i].id).getElementsByTagName('ul');

// for each UL within the liitem 
for (var j = 0; j < arr_sub_uls.length; j++){

// assign id's to the span around delete
var actionis = arr_sub_uls[j].childNodes[0].childNodes[1].id = elms[i].id + "_" + j;     // elms[i].id is the liitem id and j is the number of uls'

// attach the event handler
addEventHandler(arr_sub_uls[j].childNodes[0],actionis)

}
}
}


function  addEventHandler(s, actionis){
s.onmouseover = function(){ document.getElementById(actionis).style.display = "block" }
s.onmouseout = function(){ document.getElementById(actionis).style.display = "none" }
}

see fiddle: http://jsfiddle.net/EW2cm/1/

Upvotes: 1

Related Questions