Home/ Questions/Q 3302140
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:49:17+00:00

I am attempting to write a JS function (using prototype in rails) that will

  • 0

I am attempting to write a JS function (using prototype in rails) that will show hidden divs within a li when that li is mouseover’ed. Each li has a unique id that is a number, like so:

<li id="100">
  <div style="display:none;" id="hover-display-content">Content</div>
  <div style="display:none;" id="more-hover-display-content">Content</div>
  <div style="display:none;" id="even-more-hover-display-content">Content</div>
</li>

I’m not sure how to go about doing this though, especially where the JS only shows the hidden elemenst for that specific li.

I’m thinking something like:

Event.observe(window, 'load', function() {  
  Event.observe($("li"), 'mouseover', function() {
     var id = readAttribute("id")
     id.getElementById("hover-display-content").style.display = "inline"; 
     id.getElementById("more-hover-display-content").style.display = "inline";
     id.getElementById("even-hover-display-content").style.display = "inline";
  });  
Event.observe($("li"), 'mouseout', function() {  
     var id = readAttribute("id")
     id.getElementById("hover-display-content").style.display = "none"; 
     id.getElementById("more-hover-display-content").style.display = "none";
     id.getElementById("even-hover-display-content").style.display = "none";
});  
});

But it doesn’t seem to be working. Where am I going wrong?

Edit:

I am now using:

    Event.observe(window, 'load', function() {  
$$('li').invoke('observe', 'mouseover', function(event) {
    this.children[0].toggle();
});

$$('li').invoke('observe', 'mouseout', function(event) {
    document.children[0].toggle();
});
    });

Which is partially working, however my code looks like the following:

<ul>
  <li>
    <div style="display:hidden;">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

When I rollover the li it displays the hidden div, however if I rollover the second div it hides the comment again, even though this div is in the li. Why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    with a tag and hover? just providing an idea

    <html>
<head>
<style>
a div{display:none; height:10px;}
a:hover div{display:inline;}
</style>
</head>
<body>
<ul>
  <li><a>a<div id="hover-display-content">Content</div></a></li>
  <li><a>s<div id="more-hover-display-content">Content1</div></a></li>
  <li><a>d<div id="even-more-hover-display-content">Content2</div></a></li>
</ul>  
</body>
</html>
    • 0