在图像悬停上显示图像

Question

我想对我的网站产品进行悬停显示。 我最初的想法是使用显示/隐藏 jQuery 函数，之后我虽然使用数组是我最好的选择，但我的知识是 0

This is exactly what I want

当您悬停任何产品时，它的数组值会显示在容器下方，其中包含各种信息

这是我现在拥有的代码：

<script>
 function display() {
  var imgArray = ["E11.png", "E11BIO.png", "E22-clear-2018.png", "E22BIO.png"];
 }
</script>

    <img src="E11.png" onHover="display();">
    <img src="E11BIO.png" onHover="display();">
    <img src="E22-clear-2018.png" onHover="display();">
    <img src="E22BIO.png" onHover="display();">

    <div class="display">
        <img src="imgArray[i]" style="width:50px;">
    </div>

我知道我的代码很垃圾，但这只是为了说明我的方法，我正在努力使它更人性化，但我的经验不足阻止了我完成我的任务。 任何相关的材料代码甚至关于如何使用 html 数组的教程都值得赞赏。 提前致谢

Answer 1

让我们假设你的瓶子阵列看起来像我下面的小提琴。然后，我将首先以编程方式将您的瓶子添加到您的页面。从长远来看，当您后端的瓶子/图像或数据发生变化时，这将为您节省大量工作。

因此，您需要一些addBottle 函数来在“架子”上展示瓶子。在该函数中，您为 mouseleave 和 mouseenter 附加了瓶子的事件处理程序。

let bottles = [
	{img: 'someImageReference 1', title: 'some Title 1', year: '1900'},
  {img: 'someImageReference 2', title: 'some Title 2', year: '1901'},
  {img: 'someImageReference 3', title: 'some Title 3', year: '1902'},
  {img: 'someImageReference 4', title: 'some Title 4', year: '1903'},
  {img: 'someImageReference 5', title: 'some Title 5', year: '1904'},
  {img: 'someImageReference 6', title: 'some Title 6', year: '1905'},
  {img: 'someImageReference 7', title: 'some Title 7', year: '1906'},
  {img: 'someImageReference 8', title: 'some Title 8', year: '1907'},
];

for(var i = 0; i < bottles.length; i++) {
	addBottle(bottles[i]);
}

function addBottle( bottleData ) {
	let $bottle = $('<span></span>').addClass('bottle');
  let $shelf = $('.shelf');
  $shelf.append($bottle);
  $bottle.on('mouseenter', function() {
  	displayBottleData( bottleData );
  }).on('mouseleave', function() {
  	hideBottleDetails();
  });
}

function hideBottleDetails() {
	let $bartender = $('#bartender');
  $bartender.empty();
}

function displayBottleData( data ) {
	let $bartender = $('#bartender');
	hideBottleDetails();
  $bartender.text('This bottle is from ' + data.year);
}

#bartender {
  width: 100%;
  background: red;
  margin-top: 2em;
  color: white;
}

.shelf {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bottle{
  width: 10%;
  height: 100px;
  background: black;  
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shelf"></div>

<div id="bartender">
  
</div>