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

How to make a dynamic switch image on mouseover with bootstrap?

本文关键字：动态 图像 何使用 bootstrap mouseover      更新时间：2023-09-26

我想将我的图像从此源src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg"更改为此源src="img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg"在鼠标悬停上，开关将允许我将图像从黑色和带e更改为彩色图像。

<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在.

中不起作用

试试这样的东西：

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

我用这段代码找到了一个解决方案，但它只在图像上执行。

<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">中，但我无法使其工作。

有多种方法可以实现

其中之一是有两个图像，一个用于缩略图图像，另一个用于鼠标悬停图像。缩略图和鼠标悬停图像位于完全相同的位置，但鼠标悬停图像在z索引中为+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，输出

目前我发现了一个可以很好地使用我的代码的解决方案。

$(".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);
});
相关文章：