将项目悬停在下拉列表中时更改项目中的背景图像答案

【问题标题】：Change background image in items when hover a item in dropdown将项目悬停在下拉列表中时更改项目中的背景图像
【发布时间】：2020-11-22 09:33:31
【问题描述】：

嗨，我在一个项目中使用引导程序，我已经有一个简单的导航栏标题，其中已经有两个带有项目的下拉菜单。但目前我需要将其修改为一个子菜单项，其内容与下面的示例相关联，当我悬停一个子菜单项时，我需要将图像更改为悬停项关联的某个图像。示例：悬停项目 1 显示汽车，悬停项目 2 显示其他汽车，都在子菜单项内...

我的代码：

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle page-scroll" href="#" id="navbarDropdown" role="button"
                        aria-haspopup="true" aria-expanded="false">About Us</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a class="dropdown-item" href="#item1"><span class="item-text">Item 1</span></a>
    <div class="dropdown-items-divide-hr"></div>
         <a class="dropdown-item" href="#item2"><span class="item-text">Item 2</span></a>
    </div>
</li>

【问题讨论】：

标签： jquery css bootstrap-4

【解决方案1】：

在javascript中：

document.getElementsByClassName('item-text')[0].addEventListener('mouseover',function(){
document.getElementById('CAR IMG').style.display = 'block';
document.getElementById('CAR IMG2').style.display = 'none';
});
document.getElementsByClassName(''item-text')[1].addEventListener('mouseout',function(){
document.getElementById('CAR IMG2').style.display = 'block';
document.getElementById('CAR IMG').style.display = 'none';
});

确保包含您的标签，您可以在其中的任何位置添加代码。还要确保将 CAR IMG 和 CAR IMG2 替换为图像的 id，这意味着这些标签必须具有实际的 ID 属性，而不仅仅是类。

【讨论】：

如果对此答案有任何问题或疑虑，请与我联系。

【解决方案2】：

如果您不想在页面加载时加载所有图像（以节省移动设备的带宽并快速加载页面），另一种解决方案是 设置包含所需图像 URL 的数据属性为每个链接显示。然后，您可以使用 Javascript 或 Jquery更改图像容器的样式，以显示鼠标右上方链接的正确图像。

这是一个示例代码：

const defaultImage = 'http://lorempixel.com/g/400/400/';

$('[data-background-image]').on('mouseover', (e) => {
  const imageToShow = $(e.currentTarget).data('background-image');
  $('#my-background-image-container').css('background', `url(${imageToShow ? imageToShow : defaultImage})`)
})

$('[data-background-image]').on('mouseout', (e) => {
  $('#my-background-image-container').css('background', `url(${defaultImage})`)
})

#my-background-image-container{
  width: 200px;
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle page-scroll" href="#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a class="dropdown-item" href="#item1" data-background-image="http://lorempixel.com/g/500/200/"><span class="item-text">Item 1</span></a>
    <div class="dropdown-items-divide-hr"></div>
         <a class="dropdown-item" href="#item2" data-background-image="http://lorempixel.com/g/300/200/"><span class="item-text">Item 2</span></a>
    </div>
</li>

<div id="my-background-image-container">Content</div>

【讨论】：