悬停时显示多张图片答案

【问题标题】：Display multiple image on hover悬停时显示多张图片
【发布时间】：2017-03-14 14:00:57
【问题描述】：

我目前正在为我的公司创建一个基于 Web 的门户。它是在 Excel 电子表格中的“另存为网页”功能的帮助下创建的。（我不能分享网页的截图（：-（。

我想为门户添加额外的功能。我的目的是在门户中创建一个情绪电梯。我希望它漂浮在已经存在的门户上。

我对 HTML、CSS、JavaScript 和任何其他语言完全陌生。我设法找到了下面的代码并对其进行了编辑以满足我的需要。

<html>
<head>
<style>



.floating-menu {

position: fixed;
bottom:25%;
left:0px;
}


</style>

</head>

<body link=blue vlink=purple class=xl65>

<main>



<nav class="floating-menu">

<img src="\\Hub_files\MOOD ELEVATOR.png">

</nav>

</main>

</body>

</html>

现在我有了漂浮在门户screenshot 1 上的心情电梯的图像。当鼠标悬停在情绪电梯图像Screenshot 2 上时，我想继续显示情绪列表。所有的情绪都是应该以相同顺序堆叠的图像。

我正在研究如何在 stackoverflow 上阅读此代码“multiple-images-appear-on-hover”。（无法添加对页面的引用）。但我发现它必须理解它我正在阅读正确的代码。

任何建议都会对我有很大帮助。谢谢并恭祝安康。直到我很高兴用谷歌搜索:-)

【问题讨论】：

标签： html hover onhover

【解决方案1】：

你可以尝试使用这样的东西：DEMO

$("#button").hover( function() {
$("#div1").toggle();
$("#div2").toggle();
});

$("#div1").hover( function() {
$("#div1").show(); 
});
$("#div2").hover( function() {
$("#div2").show(); 
});

$("#div1").mouseout( function() {
$("#div1").hide(); 
});
$("#div2").mouseout( function() {
$("#div2").hide(); 
});

【讨论】：

【解决方案2】：

您可能希望将图像编译成一张大图像：没有本地网络方式可以在悬停时显示多张图像（除非您想弄乱一些毛茸茸的 ::before/after 伪选择器废话）。

更不用说 - 尝试定位所有这些图像是在浪费您的开发时间！最好制作一张大图（截取您分享的屏幕截图！）并将其添加为悬停内容。

【讨论】：

实际上我想分阶段进行开发.....我觉得像上面提到的那样添加列表的单个图像......这样我就可以在每个图像上触发一个 onclick 事件这将出现...以便可以根据选择更新数据库。我没有提及，因为我对一个问题中的太多要求感到困惑。

【解决方案3】：

我设法找到了解决方案... :-)。只是觉得如果有帮助就分享代码

.floating-menu {
  position: fixed;
  bottom: 25%;
  left: 0px;
}

ul li:hover ul {
  display: block;
}

ul li ul {
  position: fixed;
  bottom: 0%;
  left: 10px;
  display: none;
}

ul li ul li {
  display: block;
}

ul li ul li:hover img {
  -ms-transform: scale(1.15);
}

ul li ul li a {
  display: block !important;
}

<div>

  <ul style="list-style-type:none">
    <li class="image1">
      <a class="floating-menu" href="#"><img src="Hub_files\MOOD ELEVATOR.png" alt="MOOD ELEVATOR"></a>
      <ul id="images">
        <li>
          <a href="#"><img src="\\Hub_files\1_GRATEFUL.png" alt="grateful"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\2_WISE.png" alt="wise"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\3_CREATIVE.png" alt="creative"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\4_OPTIMISTIC.png" alt="optimistic"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\5_APPRECIATIVE.png" alt="appreciative"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\6_UNDERSTANDING.png" alt="understanding"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\7_CURIOUS.png" alt="curious"></a>
        </li>
        <li>
          <a href="#"><img src="\\ Hub_files\8_FRUSTRATED.png" alt="frustrated"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\9_IRRITATED.png" alt="irritated"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\10_ANXIOUS.png" alt="anxious"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\11_DEFENSIVE.png" alt="defensive"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\12_JUDGMENTAL.png" alt="judgmental"></a>
        </li>
        <li>
          <a href="#"><img src="\\Hub_files\13_DEPRESSED.png" alt="depressed"></a>
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：