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');
}

Answer 2

我找到了一个使用此代码的解决方案，但它只对图像进行了处理。

<img  
   class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" 
   alt="<?php echo $video->getTitre(); ?>"
   onmouseover="this.src='img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg'"
   onmouseout="this.src='img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg'"
 />

现在我想将此代码添加到Parent Div <div class="col-sm-4 col-md-4">，但我无法使其正常工作。

Answer 3

有多种方法可以做到这一点

其中一个是拥有两个图像，一个用于缩略图图像，另一个用于鼠标悬停图像。缩略图图像和鼠标悬停图像位于完全相同的位置，但鼠标悬停图像在z-index中为+1。

//img2 is the mouseover image in this example.
$('#img2').mouseover(function() {
  $(this).fadeTo(250, 1);
});

$('#img2').mouseout(function() {
  $(this).fadeTo(250, 0);
});

http://jsbin.com/jexonoxutoli/1/edit?html,js,output

Answer 4

目前我找到了一个解决方案，可以正常使用我的代码。

$(".thumbnail")
.mouseenter(function(){
    var $img = $(this).find("img");
    var newSrc = $img.attr("src").replace("/bw/", "/color/");
    $img.attr("src", newSrc);
})
.mouseleave(function(){
    var $img = $(this).find("img");
    var newSrc = $img.attr("src").replace("/color/", "/bw/");
    $img.attr("src", newSrc);
});

如何使用bootstrap在mouseover上制作动态切换图像？

4 个答案: