Question

我需要实现一种效果，当用户触发悬停在标签上时，屏幕上的当前内容会滑出，新内容会滑入（取决于悬停的内容）。这是我的HTML：

<div class="services-image" style="background:url('/sites/default/files/services-background.jpg') top left no-repeat">
<ul>
<li><a href="#" id="box-1" rel="nofollow">Secure Mobile Computing</a></li>
<li><a href="#" id="box-2" rel="nofollow">IT<br />Consulting</a></li>
<li><a href="#" id="box-3" rel="nofollow">Software<br />Engineering</a></li>
<li><a href="#" id="box-4" rel="nofollow">Microsoft<br />Services</a></li>
<li><a href="#" id="box-5" rel="nofollow">Cyber<br />Security</a></li>
<li><a href="#" id="box-6" rel="nofollow">Infrastructure &amp; System<br />Adminstration</a></li>
</ul>
</div>
</div>

因此，当用户触发＃box-2悬停时，下面的div将使用新内容轻松进/出。示例容器标记：

<div class="content-slides">
    <div class="slide-1">text</div>
    <div class="slide-2">text</div>
    <div class="slide-3">text</div>
    <div class="slide-4">text</div>
    <div class="slide-5">text</div>
    <div class="slide-6">text</div>
</div>

Answer 1

我记得看过这个教程 - 它是针对设计师的，所以你应该通过它：）

http://jqueryfordesigners.com/coda-slider-effect/

将click事件更改为mouseover。

应该很容易

jQuery - 类似Coda的内容滑动

1 个答案: