jquery - 如何以与背景相同的方式转换图像？

Question

我想一起过渡图像和背景。

CSS

#div{
  background:black;
  width:100%;
  height:200px;
  transition: background 2.3s linear;
}

j查询

$(function(){
  $("#div").mouseover(function(){
    var $p = $("#div");
    $p.css("background-color","yellow");
    $(".img").attr("src","https://pt.seaicons.com/wp-content/uploads/2015/07/Mushroom-1UP-icon.png");
  });
});

我想在鼠标悬停时将图像与背景一起转换。是否可以？我怎样才能做到这一点？ jquery 还是 css？

http://jsfiddle.net/ykrp7zbo/5/

Answer 1

您无法轻松转换 IMG 元素的来源。相反，使用 div 并将您想要的图像作为 css 背景图像放置。例如(对您的示例进行最少的更改):

--- HTML ---
<div id="div">
   <div class="img"></div>
</div>

--- CSS ---
#div {
  background: black;
  width: 100%;
  height: 200px;
  transition: background 2.3s linear;
}
div.img {
  background-image: url('http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png');
  height: 200px;
  background-repeat: no-repeat;
  transition: background 2.3s linear;
}

---- JS ----
$(function(){
    $("#div").mouseover(function(){
      var $p = $("#div");
      $p.css("background-color","yellow");
      $(".img").css({backgroundImage: "url(https://pt.seaicons.com/wp-content/uploads/2015/07/Mushroom-1UP-icon.png)"});
    });
});

将您的初始图像放在 CSS 中，您更新后的图像在修改 CSS 的 javascript 中。