如何在鼠标悬停（jQuery）上交换DIV？
这是第二简单的翻转效果，但我仍然找不到任何简单的解决方案。
想要的：
我有一个项目列表和一个相应的幻灯片（DIV）列表。加载后，第一个列表项应被选中（粗体），并且第一张幻灯片应可见。当用户将鼠标悬停在另一个列表项上时，应改为选择该列表项，并显示相应的幻灯片。
以下代码有效，但 很糟糕 。如何以一种优雅的方式获得这种行为？jQuery具有数十种动画效果和复杂的过渡效果，但是我没有想出这种效果的干净方法。
<script type="text/javascript">
function switchTo(id) {
document.getElementById('slide1').style.display=(id==1)?'block':'none';
document.getElementById('slide2').style.display=(id==2)?'block':'none';
document.getElementById('slide3').style.display=(id==3)?'block':'none';
document.getElementById('slide4').style.display=(id==4)?'block':'none';
document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
</script>
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide</li>
</ul>
<div id="slides">
<div id="slide1">Well well.</div>
<div id="slide2" style="display:none;">Oh no!</div>
<div id="slide3" style="display:none;">You again?</div>
<div id="slide4" style="display:none;">I'm gone!</div>
</div>
问题答案：
我不是在JS关闭的情况下显示所有幻灯片（这可能会破坏页面布局），而是将其放置在交换机中LIs real
A链接到服务器端代码，该代码返回在正确的交换机上预先设置了“活动”类的页面/滑动。
$(document).ready(function() {
switches = $('#switches > li');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});
#switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
}
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="switch.js"></script>
</head>
<body>
<ul id="switches">
<li class="active">First slide</li>
<li>Second slide</li>
<li>Third slide</li>
<li>Fourth slide</li>
</ul>
<div id="slides">
<div class="active">Well well.</div>
<div>Oh no!</div>
<div>You again?</div>
<div>I'm gone!</div>
</div>
</body>
</html>
-
问题内容： libgdx中是否有任何侦听器可以让我检测到鼠标悬停而不是鼠标悬停。在场景2D的按钮类中，您有2种方法isOver和isPressed，但是它们执行相同的操作…还有其他问题吗？还有另一种方法来检测鼠标悬停在actor上吗？ 问题答案： 还有的可以连接到和它提供的事件，如下面的： 该事件从根本上来说意味着鼠标开始悬停在角色上，意味着它“离开”了角色的区域。它还有一个事件，您可以使用该事件
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
问题内容： 似乎这是在webdriver中（至少在Java api中）进行悬停/鼠标悬停的方法： Python API中有可能吗？用于python的webdriver api文档似乎未提及任何类似内容。 http://selenium.googlecode.com/svn/trunk/docs/api/py/index.html 如何在python webdriver中进行悬停/鼠标悬停？ 问题答
-
问题内容： 我有一张图片： 然后，我将其显示在屏幕上： 如何检测鼠标是否在触摸图像？ 问题答案： 使用获得描述你的边界，然后使用来检查，如果鼠标光标这里面。 例：
-
我有一系列使用d3创建的行。我写了一些和事件事件。 当I时，事件通过增加行的值正常工作。 但是在上，在我编写代码的地方，事件不能正常工作，将值设置为初始值。 小提琴 帮我修一下。
-
问题内容： 我正在尝试在JButton上创建自定义鼠标悬停事件。原因是我的JButton当前是图像，因此我必须删除所有边框和动画，而不能删除所有边框和动画。所以我这样做： 这非常适合仅显示图像，并且按钮实际上可以正常工作。我想知道是否有任何预建方法可以做到这一点，或者我将如何学习做自己想做的事情。 更具体地说，当我将鼠标悬停在上方时，我希望图像做的只是使其变得更大一点。 到目前为止，我已经尝试过这