悬停时切换 div
Posted
技术标签:
【中文标题】悬停时切换 div【英文标题】：Toggle div's on hover 【发布时间】：2014-04-09 03:58:16 【问题描述】：我有一个测试 UL 列表，如下所示：
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
....
</ul>
而且，下面我有相关的 div，又名：
<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>
我想知道如何让每个 div 仅在其 LI 项悬停时显示，也许有一些淡入淡出效果。 我从这里尝试了其他一些答案，但没有运气：\
【问题讨论】：
ids 必须是唯一的。这很重要。
你能告诉我们你试过的javascript/jquery代码吗？
阅读 jQuery 文档以了解鼠标事件：api.jquery.com/category/events/mouse-events
查看我的答案并进行测试，这就是您想要的答案。使用淡入淡出
【参考方案1】：
正如我已经提到的，重要的是您的ids 是独一无二的。所以你需要找到另一种方式来引用你的<div>s。我可以建议使用data-* 属性：
HTML
<ul>
<li data-id="firstdiv">First div</li>
<li data-id="seconddiv">Second div</li>
<li data-id="thirddiv">Third div</li>
</ul>
那么您的 jQuery 可能如下所示：
$('ul li').on(
'mouseenter':function()
$('#'+$(this).data('id')).fadeIn();
,'mouseleave':function()
$('#'+$(this).data('id')).fadeOut();
);
JSFiddle
【讨论】：
如果你不想要淡化效果，也可以使用@Felix soultion。 这很好，但默认情况下它们是打开/显示的。我只需要打开第一个。因此，用户将鼠标悬停在其他项目上，并显示它。他将光标移开，再次出现第一个 这听起来像是另一个问题 ;)【参考方案2】：请参阅this fiddle。
同时保持 ID 的唯一性。
这是小提琴中的一些代码：
$(document).ready(function()
$('ul>li').hover(function()
$('#d'+$(this).prop('id')).show();
, function()
$('#d'+$(this).prop('id')).hide();
);
);
【讨论】：
【参考方案3】：把你的id改成class
<ul>
<li class="firstdiv">First div</li>
<li class="seconddiv">Second div</li>
<li class="thirddiv">Third div</li>
</ul>
<div class="firstdiv">Content 1 Here</div>
<div class="seconddiv">Content 2 Here</div>
<div class="thirddiv">Content 3 Here</div>
那么你可以使用：
$('ul li').hover(function()
var cls = $(this).attr('class');
$('div.'+cls).toggle();
)
Fiddle Demo
【讨论】：
如果这些列表项有多个类怎么办？ 当然，但只是一个想法。我没有投反对票，是吗？ 使用 .hasClass 比检查类更好。 api.jquery.com/hasClass【参考方案4】：试试这个。
html代码
<ul>
<li id="firstli">First div</li>
<li id="secondli">Second div</li>
<li id="thirdli">Third div</li>
</ul>
<div id="firstdiv">Content Here</div>
<div id="seconddiv">Content Here</div>
<div id="thirddiv">Content Here</div>
javascript。
$(document).ready(function()
$("#firstdiv").hide();
$("#seconddiv").hide();
$("#thirddiv").hide();
$("#firstli").hover(function()
$("#firstdiv").show();
);
$("#secondli").hover(function()
$("#seconddiv").show();
);
$("#thirdli").hover(function()
$("#thirddiv").show();
);
);
查看输出： fiddle demo
【讨论】：
【参考方案5】：你应该给元素一个唯一的ID
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
</ul>
<div class="myclass" id="firstdiv1">Content1 Here</div>
<div class="myclass" id="seconddiv1">Content2 Here</div>
<div class="myclass" id="thirddiv1">Content3 Here</div>
$(".myclass").hide();
$("ul li").hover(function()
$(".myclass").hide();
$("#"+this.id+1).show();
);
Demo
【讨论】：
【参考方案6】：这是你的答案
<html>
<head>
<style>
.hidden_div
display: none;
position: absolute;
</style>
<script src="script/jquery-1.10.2.js"></script>
<script>
$(document).ready(function()
$("li").mouseover(function()
var id=$(this).attr('id');
$('.hidden_div').fadeOut();
$("."+id).fadeIn();
)
);
</script>
</head>
<body>
<ul>
<li id="firstdiv">First div</li>
<li id="seconddiv">Second div</li>
<li id="thirddiv">Third div</li>
</ul>
<div class="firstdiv hidden_div">Content 1</div>
<div class="seconddiv hidden_div">Content 2</div>
<div class="thirddiv hidden_div">Content 3</div>
</body>
</html>
只需更改脚本的位置
【讨论】：
我可以用别的东西来挑选你的大脑吗？ :) 经过测试，这很有效，但是当我部署它时，它不是：\以上是关于悬停时切换 div的主要内容，如果未能解决你的问题，请参考以下文章