点击项目可以更改另一个背景图片

Question

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

<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> 

CSS

.firstPhone{ 
background: url(../images/mobile1.png) } 
.secondPhone{ 
background: url(../images/mobile2.png) } 
.thirdPhone{ 
background: url(../images/mobile3.png)} 
.fourthPhone{ 
background: url(../images/mobile4.png)} 
.fifthPhone{ 
background: url(../images/mobile5.png)} 
.sixthPhone{ 
background: url(../images/mobile6.png)} 

Answer 1

添加一些识别class到每个 “按钮”（I称之为为简单起见按钮）：

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

附加的事件处理程序，以这些元素：

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

Answer 2

纯CSS解决方案卧底单选按钮：

html { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: honeydew; 
 
} 
 

 
input { 
 
display: none; 
 
} 
 

 
.item { 
 
    cursor: pointer; 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
} 
 

 
#target { 
 
    position: absolute; 
 
    display: inline-block; 
 
    height: 176px; 
 
    width: 300px; 
 
    border: 2px solid crimson; 
 
    left: calc(50% - 150px); 
 
    top: 10px; 
 
} 
 

 
#click:checked ~ #target { 
 
    background: url('http://i.imgur.com/3jxqrKP.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 

 
#click2:checked ~ #target { 
 
    background: url('http://i.imgur.com/23lydbM.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
}

<input type="radio" id="click" name="click" value="click" /> 
 
<input type="radio" id="click2" name="click" value="click2" /> 
 

 
<label for="click"> 
 
<li class="firstPhone item">click A</li> 
 
</label> 
 

 
<label for="click2"> 
 
<li class="secondPhone item">click B</li> 
 
</label> 
 

 
<div id=target></div>

Answer 3

你可以试试这个：

<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> 

，代码：

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

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