鼠标把div自定义值改成背景后?
After the mouse has changed the div custom value to the background?
希望jquery在divclass是article-image的时候,可以得到DIVchange_picture="http://web.com/1.png"的值, 然后成为 css 背景。移除鼠标后,继续。显示原始背景 http://web.com/2.png.
如何写jquery,求指导。非常感谢
<div class="article-image cover-image homelazy" change_picture="http://web.com/1.png" style="background-image: url(http://web.com/2.png);">
</div>
$(function() {
var originalImg = '';
$('.cover-image').hover(function() {
originalImg = $(this).css('background-image');
$(this).css('background-image', 'url(' + $(this).attr('change_picture') + ')');
}, function() {
$(this).css('background-image', originalImg);
})
})
.cover-image {
width: 300px;
height: 200px;
background-size: 100%;
background-repeat: no-repeat;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-image cover-image homelazy" change_picture="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" style="background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);">
</div>
使用 class 属性 cover-image
将悬停事件绑定到 div。当鼠标移入时,先保存原来的背景图,然后使用.css
方法设置新的背景图。移开鼠标后,设置回原来的背景图。
希望jquery在divclass是article-image的时候,可以得到DIVchange_picture="http://web.com/1.png"的值, 然后成为 css 背景。移除鼠标后,继续。显示原始背景 http://web.com/2.png.
如何写jquery,求指导。非常感谢
<div class="article-image cover-image homelazy" change_picture="http://web.com/1.png" style="background-image: url(http://web.com/2.png);">
</div>
$(function() {
var originalImg = '';
$('.cover-image').hover(function() {
originalImg = $(this).css('background-image');
$(this).css('background-image', 'url(' + $(this).attr('change_picture') + ')');
}, function() {
$(this).css('background-image', originalImg);
})
})
.cover-image {
width: 300px;
height: 200px;
background-size: 100%;
background-repeat: no-repeat;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article-image cover-image homelazy" change_picture="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" style="background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);">
</div>
使用 class 属性 cover-image
将悬停事件绑定到 div。当鼠标移入时,先保存原来的背景图,然后使用.css
方法设置新的背景图。移开鼠标后,设置回原来的背景图。