Question

我正面临悬停效应的问题我希望

在鼠标悬停时，我想为每个项目更改各种图像。将显示第一个图像，但所有项目都将第一个项目的最后一个数组作为悬停。

可能有什么问题？如果你可以帮忙的话会很棒的。在这个小提琴中它完美地运作http://jsfiddle.net/matthias_h/zgnd9w90/1/3

<div class="image">
    <?php

    $i = 0;
    $datasrc = '';

    foreach ($project->images()->shuffle()->limit(3) as $image)
    {
        if ($i == 0)
        {
            $datasrc .= $image->url();
        } else
        {
            $datasrc .= ',' . $image->url();
        }
        $i ++;
    }
    ?>
    <figure class="img--container" data-image-list="<?php echo $datasrc ?>">
        <img class="img--hover" src="<?php echo $project->images()->first()->url() ?>"
             alt="<?php echo $project->title()->html() ?>">
    </figure>

</div>

这里是jQuery代码段

$(document).ready(function(){
    $('img').mousemove(function (event) {

        var xPos = event.pageX;

        $images = $(this).parents('figure').eq(0).data('imageList');

        var array = $images.split(',');

        if (xPos > 100) {
            $(this).attr("src", array[0]);
        }
        if (xPos > 200) {
            $(this).attr("src", array[1]);
        }
        if (xPos > 300) {
            $(this).attr("src", array[2]);
        }
    });
});

任何想法如何解决问题？如果我悬停图像，控制台会给我错误“拆分”未定义。我该如何解决这个问题？

鼠标悬停时多个图像更改无法正常工作

0 个答案: