Question

我目前正在为公司创建一个基于Web的门户网站。它是在＆＃34;保存为网页＆＃34;的帮助下创建的。 excel电子表格中的功能。（我不能分享网页的截图（:-((

我想为门户添加其他功能。我的意图是在门户网站内创建一个心情电梯。我希望它漂浮在已经存在的门户网站上。

我对HTML，CSS，JavaScript和任何其他语言都不熟悉。我设法找到下面的代码并编辑它以满足我的需要。

＆＃13;

<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>

＆＃13;

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

我正在研究如何阅读此代码＆＃34;多个图像 - 出现在悬停＆＃34;在stackoverflow上。（无法添加对页面的引用）。但我发现它必须理解它我正在阅读正确的代码。

任何建议都会对我有所帮助。感谢致敬。直到我会高兴googleing： - ）

Answer 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(); 
});

Answer 2

您可能希望将图像编译成一个大图像：在悬停时没有以原生网方式显示多个图像（除非您想要处理一些毛茸茸的::before/after伪句无意义）。

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

Answer 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>

在悬停时显示多个图像

3 个答案: