Javascript 单击项目以更改另一个项目的背景图像

尝试使用javascript创建一个“按钮”，通过将鼠标悬停在li项上来改变另一个li项的背景（phoneChange）。这些项目围绕着一个手机图像，屏幕截图我想在鼠标悬停在相关的li项目上时更改。我一直在寻找一个类似的例子，但没有找到任何适合我的

<ol class="list-b">
<li class="firstPhone"><span class="title">First Box</span> Lorem ipsum sit dolor.</li>
<li class="secondPhone"><span class="title">Second Box</span> Lorem ipsum sit dolor.</li>
<li class="thirdPhone"><span class="title">Third Box</span> Lorem ipsum sit dolor.</li>
<li class="fourthPhone"><span class="title">Fourth Box</span> Lorem ipsum sit dolor.</li>
<li class="fifthPhone"><span class="title">Fifth Box</span> Lorem ipsum sit dolor.</li>
<li class="sixthPhone"><span class="title">Sixth Box</span> Lorem ipsum sit dolor.</li>
<li id="phoneChange" class="firstPhone"></li>
</ol>

---

为每个“按钮”（为了简单起见，我称之为按钮）添加一些标识性的

class

：

第一个盒子Lorem ipsum sit dolor
第二个盒子是Lorem ipsum sit dolor
第三个盒子是Lorem ipsum sit dolor
第四个盒子是Lorem ipsum sit dolor
第五个盒子Lorem ipsum sit dolor
第六个盒子Lorem ipsum sit dolor

将事件处理程序附加到这些元素：

var buttons = document.getElementsByClassName('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    document.getElementById('phoneChange').css.background = this.css.background;
  });
}

var buttons=document.getElementsByClassName（'button'）；
对于（变量i=0；i

为每个“按钮”（为了简单起见，我称之为按钮）添加一些标识类：

第一个盒子Lorem ipsum sit dolor
第二个盒子是Lorem ipsum sit dolor
第三个盒子是Lorem ipsum sit dolor
第四个盒子是Lorem ipsum sit dolor
第五个盒子Lorem ipsum sit dolor
第六个盒子Lorem ipsum sit dolor

将事件处理程序附加到这些元素：

var buttons = document.getElementsByClassName('button');

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    document.getElementById('phoneChange').css.background = this.css.background;
  });
}

var buttons=document.getElementsByClassName（'button'）；
对于（变量i=0；i

使用undercover单选按钮的纯CSS解决方案：

html{
宽度：100%；
身高：100%；
背景：蜜露；
}
输入{
显示：无；
}
.项目{
光标：指针；
用户选择：无；
-webkit用户选择：无；
}
#目标{
位置：绝对位置；
显示：内联块；
高度：176像素；
宽度：300px；
边框：2件纯红；
左：计算（50%-150px）；
顶部：10px；
}
#单击：选中~#目标{
背景：url（'http://i.imgur.com/3jxqrKP.jpg');
背景重复：无重复；
背景大小：100%100%；
}
#单击2：选中~#目标{
背景：url（'http://i.imgur.com/23lydbM.jpg');
背景重复：无重复；
背景大小：100%100%；
}

单击
单击B

使用undercover单选按钮的纯CSS解决方案：

html{
宽度：100%；
身高：100%；
背景：蜜露；
}
输入{
显示：无；
}
.项目{
光标：指针；
用户选择：无；
-webkit用户选择：无；
}
#目标{
位置：绝对位置；
显示：内联块；
高度：176像素；
宽度：300px；
边框：2件纯红；
左：计算（50%-150px）；
顶部：10px；
}
#单击：选中~#目标{
背景：url（'http://i.imgur.com/3jxqrKP.jpg');
背景重复：无重复；
背景大小：100%100%；
}
#单击2：选中~#目标{
背景：url（'http://i.imgur.com/23lydbM.jpg');
背景重复：无重复；
背景大小：100%100%；
}

单击
单击B

您可以尝试以下方法：

<ol id="phoneList" class="list-b">
    <li onmouseover="phoneChanged('firstPhone');"><span class="title">First Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('secondPhone');"><span class="title">Second Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('thirdPhone');"><span class="title">Third Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('fourthPhone');"><span class="title">Fourth Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('fifthPhone');"><span class="title">Fifth Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('sixthPhone');"><span class="title">Sixth Box</span> Lorem ipsum sit dolor.</li>
    <li id="phoneChange"></li>
</ol>

第一个盒子是Lorem ipsum sit dolor
第二个盒子是Lorem ipsum sit dolor
第三个盒子是Lorem ipsum sit dolor
第四个盒子是Lorem ipsum sit dolor
第五个盒子是Lorem ipsum sit dolor
第六盒Lorem ipsum sit dolor

以及守则：

<script>
    function phoneChanged(className) {
        document.getElementById('phoneChange').className = className;
    }
</script>

函数phoneChanged（类名）{
document.getElementById（'phoneChange'）。className=className；
}

此代码对鼠标悬停在每个项目上作出反应。要对单击做出反应，请将“onmouseover”替换为“onclick”。

您可以尝试以下方法：

<ol id="phoneList" class="list-b">
    <li onmouseover="phoneChanged('firstPhone');"><span class="title">First Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('secondPhone');"><span class="title">Second Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('thirdPhone');"><span class="title">Third Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('fourthPhone');"><span class="title">Fourth Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('fifthPhone');"><span class="title">Fifth Box</span> Lorem ipsum sit dolor.</li>
    <li onmouseover="phoneChanged('sixthPhone');"><span class="title">Sixth Box</span> Lorem ipsum sit dolor.</li>
    <li id="phoneChange"></li>
</ol>

第一个盒子是Lorem ipsum sit dolor
第二个盒子是Lorem ipsum sit dolor
第三个盒子是Lorem ipsum sit dolor
第四个盒子是Lorem ipsum sit dolor
第五个盒子是Lorem ipsum sit dolor
第六盒Lorem ipsum sit dolor

以及守则：

<script>
    function phoneChanged(className) {
        document.getElementById('phoneChange').className = className;
    }
</script>

函数phoneChanged（类名）{
document.getElementById（'phoneChange'）。className=className；
}

---

此代码对鼠标悬停在每个项目上作出反应。要对单击作出反应，请将“onmouseover”替换为“onclick”。

您希望图像在悬停或单击时更改吗？工作示例？？或者，你想在鼠标悬停或单击时更改图像吗？工作示例？？我试过了，它并没有改变背景图像，而是让每一个李都有背景图像（这样就可以掩盖我的文字）。我只想更改phoneChange中的背景图像（因为它是图像，而不是文本）。对于LI元素，我将它们保留为您标记中的内容