我想在访问者浏览项目链接时更改背景图像,但我不能让它工作。
$('.swap').on('mouseover', 'a', function() {
var backgroundUrl = "https://xxxxxxxxx.online/afbeeldingen/" + $(this).data('background');
$('.swap').css({
'background-image': 'url(' + backgroundUrl + ')'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="swap"></div>
<ul class="nav">
<li><a href="#" data-background="easy-verwijderen.svg">item 1</a></li>
<li><a href="#" data-background="easy-invite.svg">item 2</a></li>
<li><a href="#" data-background="easy-install.svg">item 3</a> </li>
</ul>
我最终解决了它如下:
$('.nav').on('mouseover', 'a', function() {
var backgroundUrl = "https://source.unsplash.com/" + $(this).attr('data-background');
$(".swap").attr("style", "background-image: url(" + backgroundUrl + ")");
});
.swap {
height: 200px;
width: 400px;
border: 1px solid black;
background-repeat: no-repeat;
background-image: url('https://source.unsplash.com/juHayWuaaoQ/400x200');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="swap">div with background</div>
<ul class="nav">
<li><a href="#" data-background="juHayWuaaoQ/400x200">Item 1</a></li>
<li><a href="#" data-background="eWFdaPRFjwE/400x200">Item 2</a></li>
<li><a href="#" data-background="eXHeq48Z-Q4/400x200">Item 3</a></li>
</ul>
谢谢,这就是我在寻找的东西。有没有办法,当我点击(而不是鼠标悬停)它没有跳到顶部?我可以删除似乎有效的href =“#”但现在不支持不同的浏览器吗?