使用原版 Javascript 和数据属性在悬停时切换背景图片

Question

我希望能够在将鼠标悬停在 link 上时切换 <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 可以实现这样的事情，但如果可能的话，我正在寻找普通的 JS 解决方案。

Answer 1

要在 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 2

直接在锚标签上加addEventListener或者在锚标签上加class然后加addEventListener，通过getAttribute得到data-bkgimg，然后设置或删除 background-image

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);
}

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

<div class="background" style="background-image: url('link-1-bkg.jpg');">
  <a href="#" data-bkgimg="https://rlv.zcache.com/crash_test_dummy_marker_classic_round_sticker-r8b36e2d5c0f74a4c843565523094b867_v9wth_8byvr_324.jpg" class="is-active">Link 1</a>
  <a href="#" data-bkgimg="https://dummyimage.com/300.png/09f/fff">Link 2</a>
</div>

Answer 3

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/

更新： 正如您可能注意到的那样，有多种不同的方法，但主要思想是使用背景图像 link、data-bkgimg="link-2-bkg.jpg" 存储数据属性并将其设置为 div 的背景使用js鼠标事件，比如mouseover

使用原版 Javascript 和数据属性在悬停时切换背景图片

Switch background image on hover using vanilla Javascript and data attributes

html

javascript

css

background-image

hover