在图像上显示图像悬停

Question

我想对我的网站产品进行悬停显示。我最初是使用显示/隐藏 jQuery 函数，之后我虽然使用数组是我最好的选择，但我的知识为 0这正是我想要的当您将鼠标悬停在任何产品上时，其数组值将显示在下面的容器中，其中包含各种信息这是我现在的代码：<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>