时间戳

首页 > 解决方案 > Div 悬停功能未按预期运行

css - Div 悬停功能未按预期运行

问题描述

当我将鼠标悬停在图像上时，我正在尝试创建一个下拉菜单。它可以工作，但它会移动我的图像。这是最初的样子，只有一张图像具有悬停功能。

在此处输入图像描述

这是代码

  <table width="100%">
  <tr>
  <td width=10%>
  <div><a href=""><img height="300" width="300" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></a></div>
     </td>
      <td>
      <div class="image1 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
    <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
    </div>
  </div>
    <div class="image2 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
    </div>
   </div>
   <div class="image3"><img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></div>
   <div class="image4"><img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></div>

  <div class="image1"><img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></div>

    </td>
    </tr>
    </table>

当我向其他图像添加额外的下拉菜单时，它会给我下面的图像。我认为部分原因是因为我将其格式化为 html 表格。您可以提供的任何帮助将不胜感激。

更多细节，这里是codepen 在此处输入图像描述

标签： css

解决方案

让我们直接跳到另一个修复：

.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.row-1,
.row-5 {
  margin-left: 190px
}

.row-2,
.row-4 {
  margin-left: 150px
}

.row-3 {
  margin-left: 130px
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="wrapper">
  <div class="column" <a href=""><img height="300" width="300" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" /></a>
  </div>
  <div class="column">
    <div class="img-rows row-1 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-2 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-3 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-4 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <div class="img-rows row-5 dropdown">
      <img height="80" width="80" src="https://images-na.ssl-images-amazon.com/images/I/61dfrZsdS7L._AC_SY400_.jpg" />
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

首先，与失败的原因无关，使用表格进行布局不再是网络的“现代”方式（这是一种观点，而不是法律！）。我的示例使用了弹性盒方法，因此您可以希望从示例中看到一些东西。

现在，至于为什么你的例子失败了......

您有一个名为“下拉菜单”的类，该类的显示设置为“inline-block”。修复代码所需要做的就是将其更改为“阻止”。

来自https://www.w3schools.com/Css/css_inline-block.asp：

与 display:block 相比，主要区别在于 display:inline-block 不会在元素后添加换行符，因此该元素可以位于其他元素旁边。

将类更改为：

.dropdown {
  position: relative;
  display: block;
}

然后一切都应该做你想做的事。

推荐阅读