Javascript Hover Content Show

Я пытаюсь написать JS-функцию (используя прототип в рельсах), которая будет отображать скрытые div в пределах li, когда это li наводится на клавиатуру. Каждый литий имеет уникальный идентификатор, который является номером, например, так: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>

я не уверен, как идти об этом, хотя, особенно там, где JS только показывает скрытые elemenst для этой конкретной ли.

Я думаю, что-то вроде:

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

Но не кажется, что это будет работать. Где я иду не так?

Edit:

Я теперь с помощью:

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

который частично работает, однако мой код выглядит следующим образом:

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

Когда я опрокидывание литиево его отображает скрытый div, однако, если я прокручу второй div, он снова скрывает комментарий, хотя этот div находится в ли. Зачем?

источник

2010-10-29 goddamnyouryan

с меткой и зависанием? просто предоставление идеи

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

источник

2010-10-29 05:44:24 jebberwocky

Я не уверен, что это ваша единственная проблема, но одна ключевая вещь заключается в том, что DOM-идентификатор не может начинаться с числа, вам нужно прикрепить его к чему-то вроде model_name-100. Кроме того, все id должны быть уникальными. Поэтому ваш внутренний контент div должен преобразовать эти id в классы, такие как class="even-more-hover-display-content" ... или, альтернативно, вы могли бы префикс id с id родительского элемента, такого как model_name-100-even-more-hover-display-content.

источник

2010-10-29 05:18:59 prodigitalson

На самом деле мой элемент начинается с префикса, я просто взял его для краткости. – goddamnyouryan

@ Ryan: не очень хорошо, когда важно, как вы выбираете и действуете на вещи ... может захотеть вернуть код дословно, минус конфиденциальные. – prodigitalson

Я хотел бы начать с .getElementByClass() --- устаревший в прото 1,6

Link here.

Как запасной план, вот проверка концепции в регулярном JS, которая работает:

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

источник

2010-10-29 05:25:39

с помощью JQuery

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

это не так просто. ,

источник

2010-10-29 05:50:43 pahnin

изменен формат шрифта – pahnin

Javascript Hover Content Show

ответ

Смежные вопросы