.HTML中常见的父悬停效果_Html_Css_Github

.HTML中常见的父悬停效果

html css github

.HTML中常见的父悬停效果,html,css,github,Html,Css,Github,我对编码比较陌生，在Github中从事回购工作。我在应用悬停效果的同一页面上有12个点击框，所以悬停时会出现PNG。应用悬停效果后，单击框将不再工作，反之亦然。我很确定这是HTML的问题我目前正在处理的clickBox是。clickBox。这是CSS中的悬停效果： .clickBox-Ministries, .png-overlay { position: absolute; width: 6%; height: 14%; top: 12%; left:

我对编码比较陌生，在Github中从事回购工作。我在应用悬停效果的同一页面上有12个点击框，所以悬停时会出现PNG。应用悬停效果后，单击框将不再工作，反之亦然。我很确定这是HTML的问题

我目前正在处理的clickBox是。clickBox。这是CSS中的悬停效果：

.clickBox-Ministries,
.png-overlay {
    position: absolute;
    width: 6%;
    height: 14%;
    top: 12%;
    left: 11%;
}
.png-overlay{
    /*display: none;*/
    position: absolute;
    width: 12%;
    height: 13%;
    top: 12.5%;
    left: 8%;
    z-index: 1;
    opacity: 0;
}
.common-parent{
    position: relative;
}
img.png-overlay:hover{
    display: inline;
    opacity: 1;
    /*transition: opacity 0.1s ease-in-out;*/
    cursor: pointer;
}

当我以这种方式设置HTML时，clickBox不起作用，悬停效果也不起作用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
    <!-- Main Nav -->
        <div class=clickContainer>
            <div class="common-parent">
                <div class="clickBox-Ministries">

                </div>
                <img class="png-overlay" src="Ministries_Overlay.png">
            </div>

当我从.common父对象中删除结束标记时，PNG悬停效果可以工作，但clickBox不能

最后，当我从.clickBox中删除结束标记时，clickBox可以工作，但PNG悬停效果不能：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel = "stylesheet" type = "text/css" href = "style.css"/>
</head>
<body>
    <!-- Main Nav -->
        <div class=clickContainer>
            <div class="common-parent">
                <div class="clickBox-Ministries">
                <img class="png-overlay" src="Ministries_Overlay.png">
            </div>

有什么想法吗？

基本上，你的点击框div没有高度，因为它没有内容-除非你关闭它的终止/div，在这种情况下，它认为img是它的内容，并具有图像的自然高度

默认情况下，div元素是块级元素。有关如何选择默认宽度和高度的讨论，请参见

检查发生了什么的一种方法是通过浏览器的开发工具检查元素。您将在示例中看到，div的宽度为视口的宽度（默认边距可能会减去一点，具体取决于框大小设置为什么），高度为0，除非其中包含img

在更次要的一点上，要使图像以淡入淡出的相同方式逐渐淡出，请将过渡放在img类上，而不仅仅放在悬停上

下面是一个进行这些修改的代码片段。这有点奇怪，因为没有可点击div的任何自然高度，只有img可以做任何事情（在这种情况下是悬停）。如果您希望img上方的div可点击，则需要一些可点击区域，即一些内容或明确设置高度和宽度

因此，当您运行这个代码段时，您会看到一个空白页面，并且必须在左上角左右摇动鼠标才能显示img

正文{
宽度：100vw；
高度：100vh；
}
.单击容器{
宽度：100%；
身高：100%；
}
.点击框，
.png覆盖{
位置：绝对位置；
宽度：6%；
身高：14%；
最高：12%；
左：11%；
}
.png覆盖{
/*显示：无*/
位置：绝对位置；
宽度：12%；
身高：13%；
最高：12.5%；
左：8%；
z指数：1；
不透明度：0；
过渡：不透明度0.1s缓进缓出；
}
.共同父母{
位置：相对位置；
宽度：100%；
身高：100%；
}
png叠加：悬停{
显示：内联；
不透明度：1；
光标：指针；
}