[英]show and hide list items on hover
I have an unordered list looking like this 我有一个看起来像这样的无序列表
HTML HTML
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. 当您将鼠标悬停在其中一个项目上时,会显示一个窗口,其中包含有关该项目的一些信息。 I have worked this out for one item, now I wanna know how I can make this work for the entire list. 我已经为一个项目解决了这个问题,现在我想知道如何在整个列表中完成这项工作。
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js. 我最初的想法是为每个项目创建一个脚本......但考虑到js的功能,这似乎有点厚。
Javascript 使用Javascript
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
So my question is of course, how can I make this script to work for all items. 所以我的问题当然是,如何让这个脚本适用于所有项目。
I'd suggest: 我建议:
$('#pop li').hover(
function() {
$('div.info').eq($(this).index()).show();
}, function() {
$('div.info').eq($(this).index()).hide();
});
Working with slightly-changed HTML: 使用略微更改的HTML:
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
What I forgot to say is that this will show the .info
element that corresponds to the same index
as the currently hovered-over li
element, so hovering the first li
will show the first .info
, and so on. 我忘了说的是,这将显示与当前悬停的li
元素相同的index
对应的.info
元素,因此将第一个 li
将显示第一个.info
,依此类推。 So it's dependant on maintaining a predictable relationship between the li
and the .info
elements. 因此,它依赖于维持li
和.info
元素之间的可预测关系。
As an aside, it's possible to replicate this interaction using just CSS, albeit it requires a click rather than a hover event, so long as you amend the li
HTML to include a link that points to the id
of the relevant div
: 顺便说一句,只使用CSS就可以复制这种交互,虽然它需要点击而不是悬停事件,只要你修改li
HTML以包含指向相关div
的id
的链接:
<div id="pop">
<ul>
<li><a href="#info1">Item 1</a></li>
<li><a href="#info2">Item 2</a></li>
<li><a href="#info3">Item 3</a></li>
<li><a href="#info4">Item 4</a></li>
<li><a href="#info5">Item 5</a></li>
<li><a href="#info6">Item 6</a></li>
<li><a href="#info7">Item 7</a></li>
</ul>
</div>
<div class="info" id="info1"></div>
<div class="info" id="info2"></div>
<div class="info" id="info3"></div>
<div class="info" id="info4"></div>
<div class="info" id="info5"></div>
<div class="info" id="info6"></div>
<div class="info" id="info7"></div>
And the CSS: 而CSS:
.info {
/* hides by default */
display: none;
}
.info:target {
/* shows when targeted */
display: block;
}
JS Fiddle demo . JS小提琴演示 。
Incidentally, quoting attributes is optional (though if it's an attribute that contains white-space it must be quoted), but if you quote you must have a quote at both ends of the value you're quoting: <div id="info-1></div>
is not valid HTML (since the string isn't closed until the next line at the beginning of the next attribute); use: <div id="info-1"></div>
. 顺便说一句,引用属性是可选的(不过,如果它是一个包含空格, 必须用引号引起来的属性),但如果你引用你必须在你引用价值的两端报价: <div id="info-1></div>
是无效的HTML(因为该字符串没有闭合,直到在下一属性的开始的下一行);用途: <div id="info-1"></div>
And, further, your posted jQuery: 而且,你发布的jQuery:
$(function(){
$('pop a').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
This can't work, because: 这不起作用,因为:
a
element inside of a pop
element (which, obviously, doesn't exist). 选择器不匹配任何元素,你试图将a
元素定位在一个pop
元素内(显然,它不存在)。 What you need to do is preface the id
with a #
(as you do in the next line, so I'm assuming a typo there), to give: $('#pop a')
. 你需要做的是在id
加上一个#
(正如你在下一行中所做的那样,我假设有一个错字),给: $('#pop a')
。 But, 但, a
elements in the #pop
element, therefore no events will be, or can be, bound. 没有a
中的元素#pop
元件,因此没有事件将是,或者可以,约束。 If you need to use that form, however, then a couple of adaptations can make it work: 但是,如果您需要使用该表单,那么可以使用它进行一些调整:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).text().match(/(\d+)/)).show();
},function(){
$('#info-' + $(this).text().match(/(\d+)/)).hide();
});
});
References: 参考文献:
try this : 尝试这个 :
$(function(){
$('#pop li').hover(function(){
$('#info-'+$(this).index()+1).show();
},function(){
$('#info-'+$(this).index()+1).hide();
});
});
you've binded an hover event on all a
tags inside pop element (though you have syntax error, you should always add '#' when addressing an element by id) and you don't have them what you''re looking for is : 你已经绑定的悬停事件上的所有a
流行元素标签内(虽然你有语法错误,你应该解决的ID元素时随时添加“#”),你没有他们有什么特殊照顾寻找的是:
$('#pop li').hover(function() {
});
Here is sample http://fiddle.jshell.net/7QmR5/ 这是样本http://fiddle.jshell.net/7QmR5/
HTML: HTML:
<div id="pop">
<ul>
<li id="li1">Item 1</li>
<li id="li2">Item 2</li>
<li id="li3">Item 3</li>
</ul>
</div>
<div id="info-1" style="display:none;">info 1</div>
<div id="info-2" style="display:none;">info 2</div>
<div id="info-3" style="display:none;">info 3</div>
JavaScript: JavaScript的:
$(function(){
$('#pop li').hover(function(){
$('#info-' + $(this).attr('id').replace('li','')).show();
},function(){
$('#info-' + $(this).attr('id').replace('li','')).hide();
});
});
I've got an easier solution: 我有一个更简单的解决方案:
CSS CSS
#info-1{
display:none;
}
ul > li:hover #info-1 {
display:block;
}
giving the li elements an id will make it easier to select them using CSS unless you want to use pseudo I believe it's called. 给li元素一个id会更容易使用CSS选择它们,除非你想使用伪我相信它被调用。
Or the jQuery if needed: 或者jQuery如果需要:
$('li:eq[0]','#pop').hover(function(){
$('info-1').show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.