我想一起过渡图像和背景。
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?
最佳答案
您无法轻松转换 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 中。
关于jquery - 如何以与背景相同的方式转换图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50689841/