Question

我希望能够在悬停在链接上时切换<div>的背景图片。 <div>在首页加载时没有背景图片。

这是我目前所拥有的：

<div class="background">
  <a href="#" data-bkgimg="link-1-bkg.jpg">Link 1</a>
  <a href="#" data-bkgimg="link-2-bkg.jpg">Link 2</a>
</div>

这就是我在悬停时想要实现的目标：

<div class="background" style="background-image: url('link-1-bkg.jpg');">
  <a href="#" data-bkgimg="link-1-bkg.jpg" class="is-active">Link 1</a>
  <a href="#" data-bkgimg="link-2-bkg.jpg">Link 2</a>
</div>

我很欣赏使用jQuery可以实现这样的事情，但是如果可能的话，我正在寻找一个vanilla JS解决方案。

Answer 1

Check this codepen

var link1 = document.getElementById("link1");
var div1 = document.getElementById("div1");

link1.addEventListener("mouseover", function( event ) { 
    var bg = event.target.dataset.bkgimg;
    div1.style.backgroundImage = 'url('+bg+')';
});

link1.addEventListener("mouseleave", function( event ) { 
    div1.style.backgroundImage = '';
});

这是唯一的示例（但仍然有效）代码可以帮助您获得想法。另外，如果您熟悉JQuery但想要使用vanilla.js，请考虑以下页面：http://youmightnotneedjquery.com/

<强>更新您可能已经注意到有不同的方法，但主要的想法是使用背景图像链接data-bkgimg="link-2-bkg.jpg"存储数据属性，并使用js鼠标事件将其设置为div的背景，如mouseover

Answer 2

要在vanilla js中实现这一点，你可以做的只是获取元素并将事件监听器附加到鼠标事件，如下所示：

var el = document.querySelector("#hoverItem");

el.addEventListener("mouseover", function(){
    el.style.backgroundImage = "url('http://lorempixel.com/output/nature-q-c-640-480-10.jpg')";
});

el.addEventListener("mouseout", function(){
    el.style.backgroundImage = "url('http://lorempixel.com/output/abstract-q-c-640-480-3.jpg')";
});

工作示例：

https://jsbin.com/ceqiku/edit?html,js,output

Answer 3

直接将addEventListener添加到锚标记或将类添加到锚标记，然后向其添加addEventListener，并通过data-bkgimg获取getAttribute，然后设置或删除{{1 }}

＆＃13;

background-image

＆＃13;

var el = document.getElementsByTagName('a');

function setImage() {
  var bg = this.getAttribute('data-bkgimg');
  this.style.backgroundImage = "url(" + bg + ")";
}

function removeImage() {
  this.style.backgroundImage = "url('')";
}

for (var i = 0; i < el.length; i++) {
  el[i].addEventListener('mouseover', setImage, false);
  el[i].addEventListener('mouseout', removeImage, false);
}

＆＃13;

a {
  padding: 30px;
  display: inline-block;
  background-size: cover;
}

＆＃13;

使用vanilla Javascript和数据属性在悬停时切换背景图像

3 个答案: