滚动文本链接时更改背景图像URL？

Question

我在编写代码时遇到麻烦。 我已经尝试了不同的方法，并在此处检查了其他解决方案以尝试将其更改为我的需求，但我仍在学习Javascript，但找不到解决方法。

我想做的是，当您滚动右侧的文本时，左侧的图像会发生变化。 例如，如果您滚动到“规则”，则左侧的小方框应变为选中标记（当然，其余的方框也应如此）。

我们这样做的方法是使图像成为div中的背景图像，但是我们不确定这是否是最佳选择。 我在这里进行了“ onmouseover”的最新尝试，但似乎不起作用。

感谢您的阅读。

 function CTHOVER2() { if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";) { getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')"; } } 

 .caretakergoalsText { color: #b4ac7d; font-family: Ubuntu; font-size: 16px; letter-spacing: -1px; padding-top: 1px; } .caretakergoalsText:hover { color: #e4d08a; transition: color 1s; } a { text-decoration: none; } .caretakergoalsImage { background-image: url('https://i.imgur.com/TSoKZYw.jpg'); width: 23px; height: 23px; float: left; margin-bottom: 7px; margin-right: 7px; } .caretakergoalsImage:hover { background-image: url('https://i.imgur.com/zRVjd5a.jpg'); } .caretakergoalsImageACTIVE { background-image: url('https://i.imgur.com/zRVjd5a.jpg'); width: 23px; height: 23px; float: left; margin-bottom: 7px; margin-right: 7px; } .caretakergoalsclear { clear: both; } 

 <a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501"> <div class="caretakergoalsImageACTIVE"></div> <div class="caretakergoalsText">News</div> </a> <div class="caretakergoalsclear"></div> <a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294"> <div class="caretakergoalsImage" id="2"></div> <div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div> </a> <div class="caretakergoalsclear"></div> <a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913"> <div class="caretakergoalsImage"></div> <div class="caretakergoalsText">About</div> </a> <div class="caretakergoalsclear"></div> <a href="#"> <div class="caretakergoalsImage"></div> <div class="caretakergoalsText">Events</div> </a> 

Answer 1

这就是你想做的吗？

http://jsfiddle.net/ohqtjvuw/8/

Array.from(document.getElementsByClassName('caretakergoalsText')).forEach(item => {
console.log(item.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE"))
item.onmouseenter = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
item.onmouseleave = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";})

我在那儿做了最小的改动。 我认为这是在兄弟元素上悬停的一种好方法，但是还有很多其他方法。