Javascript Hover Content Show

J'essaye d'écrire une fonction JS (en utilisant un prototype dans des rails) qui montrera les divs cachés dans un li quand ce li est mouseover'ed. Chaque li a un identifiant unique qui est un nombre, comme suit:Javascript Hover Content Show

<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>

Je ne suis pas sûr de savoir comment s'y prendre bien, surtout lorsque la JS ne montre que la elemenst cachée pour que li spécifique.

Je pense quelque chose comme:

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"; 
}); 
});

Mais il ne semble pas fonctionner. Où vais-je mal?

Edit:

J'utilise maintenant:

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(); 
}); 
    });

qui travaille en partie, mais mon code ressemble à ceci:

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

Quand je Survoler les li il affiche le div caché, cependant si je retourne le second div il cache à nouveau le commentaire, même si ce div est dans le li. Pourquoi?

Source

2010-10-29 goddamnyouryan

avec un tag et un survol? simplement fournir une idée

<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>

Source

2010-10-29 05:44:24 jebberwocky

Je ne sais pas si c'est votre seul problème, mais une chose importante est que les ID DOM ne peuvent pas commencer par un nombre, vous devrez préfixer cela avec quelque chose comme model_name-100. De plus, tous les id doivent être uniques. Donc votre contenu intérieur div doit avoir ces id convertis en classes comme class="even-more-hover-display-content" ... ou bien vous pouvez jsut préfixer l'id avec le id de l'élément parent comme model_name-100-even-more-hover-display-content.

Source

2010-10-29 05:18:59 prodigitalson

En fait, mon élément commence par un préfixe, je l'ai juste sorti par souci de brièveté. – goddamnyouryan

@Ryan: ce n'est pas une bonne chose à faire quand cela est important pour la façon dont vous choisissez et agissez sur les choses ... vous voudrez peut-être remettre le code à zéro, sans les choses qui sont confidentielles. – prodigitalson

Je commencerais avec le .getElementByClass() --- dépréciée en Proto 1.6

Link here.

En tant que plan de secours, voici une preuve de concept JS régulier qui fonctionne:

<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>

Source

2010-10-29 05:25:39

utilisant jquery

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

n'est pas aussi simple que cela. .

Source

2010-10-29 05:50:43 pahnin

a modifié le format de la police – pahnin

Javascript Hover Content Show

Répondre

Questions connexes