gpt4 book ai didi

javascript - 单击元素以更改另一个元素的背景图像

转载 作者:太空宇宙 更新时间:2023-11-03 20:34:19 24 4
gpt4 key购买 nike

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

最佳答案

为每个“按钮”添加一些标识(为了简单起见,我称之为按钮):

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

关于javascript - 单击元素以更改另一个元素的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35834979/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com