1

我试图让我的索引页面有 10 个图像，每个图像在鼠标悬停时都会淡入一段文本，然后在鼠标移出时会淡入原始图像。

每张图片都与 10 张不同（它是一个作品集），具有不同的文本内容。

我是一个完全的 jQuery n00b，下面是我当前的 html 页面。

到目前为止，我已经弄清楚如何让单个图像淡入另一个图像，但还没有找到一种简单的方法让索引页面上的 10 个图像在不同时间执行此操作（例如，当一个图像被鼠标悬停时）也我有没有想出如何让图像变成文本而不是另一个图像......请帮助。

任何建议或代码都非常感谢..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
img {
    display:block;
    position:absolute;
    top: 0;
    left: 0;
 }
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script TYPE="text/javascript">

$(function() {
    $('#imgs')
    .mouseenter(function() {
        $('#i2').fadeOut('slow');
    })
    .mouseleave(function() {
        $('#i2').fadeIn('slow');
    });  
});

</script>

</head>
<body>


<div id="imgs">
    <img src="/images/unlimited.jpg" id="i1">  <!-- this is the mouseover image -->
    <img src="/images/optimize.jpg" id="i2">  <!-- this is the default image -->
</div>


</body>
</html>
4

0 回答 0