Javascript Hover Content Show_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-23 02:27 出处：网络

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:

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 th开发者_运维百科e 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?

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>

Im not sure if this is your only issue but one key thing is that DOM id's cannot begin with a number, youll need to prefix that with something like model_name-100. Additionally, all id's need to be unique. So your inner content div's need to have those id's converted to classes like class="even-more-hover-display-content"... or alternatively you could jsut prefix the id with the id of the parent element like model_name-100-even-more-hover-display-content.

I would start with the .getElementByClass() --- deprecated in Proto 1.6

Link here.

As a fallback plan, here's a proof-of-concept in regular JS that works:

<li onmouseover="this.children[0].style.display = 'inline';
                 this.children[1].style.display = 'inline';"> 
   <div id="testdiv" style="display:none;background:blue">test</div>
   <div id="testdiv" style="display:none;background:blue">test</div>
</li>

using jquery

$('#id').each(function(){
$(this).css({diplay:'inline'});});

isn't that simple . .

Javascript Hover Content Show

精彩评论

关注公众号

热门标签

图文推荐

Javascript Hover Content Show

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：