Question

我正在尝试根据您悬停的列表项进行图像更改。

我有一个包含ul的容器。我有三个列表项（一个小的水平导航）。列表项位于容器的底部，在li的顶部留下空白空间。我希望li上方的空白区域根据我悬停在哪个列表项上更改图像。将有3个不同的图像或者可能使用css sprites。

我有什么办法可以用jQuery实现这个目标吗？

Answer 1

HTML：

<div id="container">
    <img id="yourImg" src="spacer.gif" width="..." height="...">
    <ul id="yourUL">
        <li data-imageswap="someimg.png">One</li>
        <li data-imageswap="another.png">Two</li>
        <li data-imageswap="andathird.png">Three</li>
    </ul>
 </div>

脚本：

$('li','#yourUL').hover(function(){
    $('#yourImg').attr('src',this.getAttribute('data-imageswap'));
}

您可以使用data属性之外的其他内容（例如className或id）来指向您的图片，但这应该是它的主旨。

在图像中粘贴透明的1x1 gif可以让您将其缩放到所需的宽度和高度。或者，你可以从没有图像开始，如果你想在没有图像的情况下将它写入DOM。

Answer 2

您可以使用jQuery UI Tabs插件。可能有点矫枉过正，但它会起作用。您可以更改用于选择要悬停的选项卡的事件，如下所示：

$('.selector').tabs({ event: 'mouseover' });

这是一个可能有帮助的超快速演示（我已经测试过并且有效），但显然你会想要使用自己的CSS：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Tabs Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $('#tabs').tabs({ event: 'mouseover' });
        });
        //]]>
    </script>
</head>
<body>
    <div id="tabs">
        <div id="tabs-1">
            <img src="images/image1.jpg" alt="image1" />
        </div>
        <div id="tabs-2">
            <img src="images/image2.jpg" alt="image2" />
        </div>
        <div id="tabs-3">
            <img src="images/image3.jpg" alt="image3" />
        </div>
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
    </div>
</body>
</html>

使用jQuery更改图像？

2 个答案: