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

Click on item to change background image of another

本文关键字：项目 背景 图像 另一个 单击      更新时间：2023-09-26

尝试使用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>

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

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

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

使用卧底单选按钮的纯 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>

你可以试试这个：

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

此代码对鼠标悬停在每个项目上做出反应。要对点击做出反应，请将"鼠标悬停"替换为"点击"。

相关文章：