使用vanilla在懸停上切換背景圖片Javascript和數據屬性

我希望能夠在懸停在鏈接上時切換<div>的背景圖像。第一頁加載時<div>不會有背景圖像。使用vanilla在懸停上切換背景圖片Javascript和數據屬性

這是我目前有：

<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解決方案。

來源

2017-07-18 abbas_arezoo

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"並將其設置爲div的背景使用js鼠標事件，如mouseover

來源

2017-07-18 13:42:58

這看起來像答案。謝謝！ –

要做到這一點香草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

來源

2017-07-18 13:32:34 Fabio

將addEventListener添加到直接定位標籤或將類添加到定位標記，然後將addEventListener添加到它，並獲得data-bkgimg到getAttribute然後設置或刪除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>

來源

2017-07-18 13:37:37

使用vanilla在懸停上切換背景圖片Javascript和數據屬性

回答

相關問題