Question

我在设置具有绝对位置和宽度，高度100％到1.0不透明度的元素时遇到一些问题。

长话短说，我有这个HTML代码：

<ul class="properties">
    <li style="width: 343px; height: 248px;">
        <img src="<?php bloginfo('template_directory'); ?>/images/parallax/apartment2.png">
        <div class="full">asd</div>
    </li>
</ul>

这个CSS代码：

.properties {
    list-style: none;
}

.properties li {
    background-color: #efece9;
    position: relative;
}

.properties li .full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0;
    /* transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out; */
}

.properties li:hover .properties li .full {
    opacity: 1;
}

然而，当我在li上盘旋时，它并没有将“full”div的不透明度设置为1.它只是保持不变。当我将其初始不透明度设置为1时，它的效果非常好（用白色背景覆盖整个li）

Answer 1

选择器应为：

.properties li:hover .full {
    opacity: 1;
}

选择器.properties li:hover .properties li .full无法正常工作的原因是因为子li元素没有具有类.properties的子元素。只有父ul元素的类为.properties。

将选择器的范围缩小到.properties li:hover后，您将从中选择子项。在这种情况下，一个班级为.full的孩子。

Answer 2

您的CSS选择器不正确。它应该是：

.properties li:hover .full {
    opacity: 1;
}

不透明度：0元素在悬停时不可见

2 个答案: