Question

我正在尝试使我的索引页面有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>

图像到文本到图像与淡出/在多个图像上

0 个答案: