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

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

滚动到文本链接时更改背景图片的网址？

1 个答案: