Question

我的页面中充满了像这样的图片，或多或少：

<div class="category">
<ul class="grid">                         
    <li class="item first">
        <a href="/pic1.html" title="PIC1" class="image"><span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" width="243" height="243" /></span></a>
        <h2 class="product-name"><a href="/pic1.html" title="PIC1-1">PIC1</a></h2>
    </li>
    <li class="item">
        <a href="/pic2.html" title="PIC2" class="image"><span><img src="/pic1.jpg" width="243" height="243" /></span></a>
        <h2 class="product-name"><a href="/pic2.html" title="PIC2-1">PIC2</a></h2>
    </li>


    <li class="item last">
        <a href="/pic3.html" title="PIC3" class="image"><span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" /></span></a>
        <h2 class="product-name"><a href="/pic3.html" title="PIC3-1">PIC3</a></h2>
        </li>
    </ul>

对于列表中的每个项目，我想要一个仅在鼠标悬停时显示的第二个图像，如果在html中为该列表项提供了另一个图像。

我如何在html和相应的javascript中执行此操作？

Answer 1

你可以试试这个：

$(function () {
$('img').each(function () {
    $(this).data('original', this.src)
}).mouseenter(function () {
    $(this)
        .attr('src', $(this).data('hover'))
        .animate({
        marginTop: 0,
        marginRight: 0,
        marginLeft: 0,
        borderWidth: 10
    }, 'fast')
}).mouseleave(function () {
    $(this)
        .attr('src', $(this).data('original'))
    .animate({
        marginTop: 20,
        marginRight: 10,
        marginLeft: 10,
        borderWidth: 0
    }, 'fast')
})
})

<强> working fiddle

Answer 2

使用javascript数组，你可以这样做

<script>
var a=0;
function show_next()
{
var imgg = new Array();
imgg[0] = "pic1.jpg";
imgg[1] = "pic2.jpg";
imgg[2] = "pic3.jpg";
if (a>imgg.length-1)
{
a=0;
}
document.getElementById("image").src=imgg[a];
document.getElementById("show").title=imgg[a];
document.getElementById("show").href=imgg[a];
document.getElementById("show_2").href=imgg[a];
document.getElementById("name_image").innerHTML=imgg[a];
a=a+1;
}
</script>

<div class="category">
<ul class="grid">                         
<li class="item first">
<a href="/pic1.html" title="PIC1" class="image" onmouseover="show_next();" id="show"><span><img src="" width="243" height="243" id="image" / ></span></a>
<h2 class="product-name" ><a href="/pic1.html" title="PIC1-1"  id="show_2"><span id="name_image">PIC1</span></a></h2>
</li>
</ul>

Answer 3

$(".image").on('hover', function(event) {
    $(this).attr('src',$(this).next().data('src'));
}

上面的代码将在您每次悬停页面的一个图像时执行，然后从image的下一个元素中获取数据属性：

<image class="image" src="yourock.jpg">
<span style="display:none" data-src="yousuck.jpg"></span>

Answer 4

使用普通的javascript，它将是这样的：在head section中添加：

<script language="javascript" type="text/javascript">
     function swapimg(img)
     {
         /* If second image is not provided stop execution */
         if(img.getAttribute('data-hover') == '') return;

         var currentSRC = img.src;
         img.src = img.getAttribute('data-hover');
         img.setAttribute('data-hover', currentSRC);
     }
</script>

然后在你的代码中添加onmouseover和onmouseout

<div class="category">
<ul class="grid">                         
<li class="item first">
    <a href="/pic1.html" title="PIC1" class="image"><span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" onmouseover="swapimg(this);" onmouseout="swapimg(this);" width="243" height="243" /></span></a>
    <h2 class="product-name"><a href="/pic1.html" title="PIC1-1">PIC1</a></h2>
</li>
<li class="item">
    <a href="/pic2.html" title="PIC2" class="image"><span><img src="/pic1.jpg" width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span></a>
    <h2 class="product-name"><a href="/pic2.html" title="PIC2-1">PIC2</a></h2>
</li>


<li class="item last">
    <a href="/pic3.html" title="PIC3" class="image"><span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span></a>
    <h2 class="product-name"><a href="/pic3.html" title="PIC3-1">PIC3</a></h2>
    </li>
</ul>
</div>

在库中为每个图像悬停时更改图像？

4 个答案: