Html 当应用于子div时，“悬停”停止工作，当“位置”设置为“绝对”时，按钮消失_Html_Css_Hover_Position

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

html css

Html 当应用于子div时，“悬停”停止工作，当“位置”设置为“绝对”时，按钮消失,html,css,hover,position,Html,Css,Hover,Position,这里有一个比较新的问题，关于为什么悬停在子元素上不起作用，以及为什么当我将元素的位置更改为“绝对”时，元素会消失我的项目是基本的，有一个页眉、一个页脚和一个容器。在容器中有一个名为“imagewrap”的子div，它有一个映像。我想添加一些按钮，允许您更改图像。我希望这些按钮在你悬停在图像上时出现，正如你在这张gif中看到的那样当我将鼠标悬停在容器上方时，按钮确实会出现，但它们会出现在图像下方。如果我将其位置更改为绝对： .buttons { cursor: pointer;

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

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

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

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

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

以下是html和css的代码：

css

html

谢谢您的时间。

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

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

这是一个通用的同级选择器-图像是按钮元素的同级

关于不可见按钮：请将其

位置

更改为

绝对位置

——没有其他方法将其放置在图像中。您需要为它们指定宽度/高度值（否则它们将为0x0）和位置（如果您不希望它们位于左上角），例如

bottom:10px和左：10px
/右：10px

<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 { ... }