在图像上显示图像悬停

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 = [&nbsp; {img: 'someImageReference 1', title: 'some Title 1', year: '1900'},&nbsp; {img: 'someImageReference 2', title: 'some Title 2', year: '1901'},&nbsp; {img: 'someImageReference 3', title: 'some Title 3', year: '1902'},&nbsp; {img: 'someImageReference 4', title: 'some Title 4', year: '1903'},&nbsp; {img: 'someImageReference 5', title: 'some Title 5', year: '1904'},&nbsp; {img: 'someImageReference 6', title: 'some Title 6', year: '1905'},&nbsp; {img: 'someImageReference 7', title: 'some Title 7', year: '1906'},&nbsp; {img: 'someImageReference 8', title: 'some Title 8', year: '1907'},];for(var i = 0; i < bottles.length; i++) {&nbsp; addBottle(bottles[i]);}function addBottle( bottleData ) {&nbsp; let $bottle = $('<span></span>').addClass('bottle');&nbsp; let $shelf = $('.shelf');&nbsp; $shelf.append($bottle);&nbsp; $bottle.on('mouseenter', function() {&nbsp; &nbsp; displayBottleData( bottleData );&nbsp; }).on('mouseleave', function() {&nbsp; &nbsp; hideBottleDetails();&nbsp; });}function hideBottleDetails() {&nbsp; let $bartender = $('#bartender');&nbsp; $bartender.empty();}function displayBottleData( data ) {&nbsp; let $bartender = $('#bartender');&nbsp; hideBottleDetails();&nbsp; $bartender.text('This bottle is from ' + data.year);}#bartender {&nbsp; width: 100%;&nbsp; background: red;&nbsp; margin-top: 2em;&nbsp; color: white;}.shelf {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; justify-content: space-between;}.bottle{&nbsp; width: 10%;&nbsp; height: 100px;&nbsp; background: black;&nbsp;&nbsp;&nbsp; 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">&nbsp;&nbsp;</div>