javascript - 如何使用 Bootstrap 在鼠标悬停时制作动态切换图像？

Question

我想从这个来源更改我的图像 src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg"到这个src="img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg"鼠标悬停 女巫将允许我将图像从黑色和白色更改为彩色图像。

<div class="row">
    <?php foreach ($videos as $video) : ?>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" alt="<?php echo $video->getTitre(); ?>">
                <div class="caption">
                    <h3><?php echo $video->getTitre(); ?></h3>
                    <p>
                        <?php echo $video->getAnnee(); ?>
                    </p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

在此先感谢您的帮助，因为我只有一些带有 css 的后台解决方案，但我的 php 无法正常工作。

Answer 1

尝试这样的事情:

HTML:

<div class="row">
    <?php foreach ($videos as $video) : ?>
        <div class="col-sm-4 col-md-4">
            <div class="thumbnail">
                <img onmouseenter='switch(this);' class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" alt="<?php echo $video->getTitre(); ?>">
                <div class="caption">
                    <h3><?php echo $video->getTitre(); ?></h3>
                    <p>
                        <?php echo $video->getAnnee(); ?>
                    </p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

JS

function switch(obj){
    $(obj).attr("src", 'img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg');
}