个人中心
gpt4 book ai didi

html - 当应用于子 div 时悬停停止工作，当位置设置为绝对时按钮消失

转载 作者：行者123 更新时间：2023-11-28 04:15:42 28 4
gpt4 key购买 nike

这是一个相对较新的问题，关于为什么悬停在子元素上不起作用以及为什么当我将它们的位置更改为“绝对”时元素消失。

我的元素是基本的，有一个页眉、一个页脚和一个容器。在容器中有一个名为“imagewrap”的子 div，它有一个图像。我想添加一些允许您更改图像的按钮。当您将鼠标悬停在图像上时，我希望这些按钮出现，正如您在这张 gif 中看到的那样，

enter image description here

当我将鼠标悬停在容器上时，按钮会出现，但它们会出现在图像下方。如果我将他们的位置更改为绝对位置:

.buttons {
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    position: absolute;
}

他们消失了。我也不知道为什么。

这是 html 和 css 的代码:

CSS

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  height: 80%;
  width: 100vw;
  background-color: white;
}

#imagewrap {
  position: relative;
  border: 1px solid lightgrey;
  width: 430px;
  display: block;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

#controllers {
    position: absolute;
    height: 20px;
}

#container #imagewrap:hover .buttons {
opacity: 1;
}

.buttons {
    cursor: pointer;
    z-index: 3;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    position: relative;
}

#previous {
    left: 0px;
    background-image: url(Images/carremoins.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 20px;
    height: 20px;
    z-index: 4;
}

#next {
    background-image: url(Images/carreplus.png);
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    right: 0px;
    z-index: 4;
    background-position: center center;
}

html

<body>

    <div id="header">
    </div>

      <div id="container">

        <div id="imagewrap">
          <img src="Images/01PARANA/Image.jpg" height="500px" id="front" />

          <div id="previous" class="buttons" onclick="change(-1);">
          </div>

          <div id="next" class="buttons" onclick="change(1);">
          </div>
        </div>

      </div>


    <div id="footer">
    </div>

    </body>

感谢您的宝贵时间。

最佳答案

尝试将此选择器用于悬停:

#imagewrap > img:hover ~ .buttons { ... }

这是一个通用的兄弟选择器——图像是按钮元素的兄弟。

关于不可见的按钮:请将它们的 position 更改为 absolute - 没有其他方法可以将它们放置在图像中。您需要为它们提供宽度/高度值(否则它们将为 0x0)以及位置(如果您不希望它们位于左上角)，例如 bottom: 10px; 和 左:10px/右:10px

关于html - 当应用于子 div 时悬停停止工作，当位置设置为绝对时按钮消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42490187/

28 4 0
文章推荐： javascript - ReduxReducer - 根据 id 过滤数组，然后更改键/值对
文章推荐： html - 使背景图像响应
文章推荐： javascript - 视差滚动移动单词/字母
文章推荐： javascript - 单击 Button 不会向下钻取 Table Bootstrap 4 和 JS 和 JQuery 中的元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com