Question

我正在尝试使用CSS将数字剪辑为20px，然后在我将鼠标悬停在其上时显示完整的数字。但是当我将鼠标悬停在它上面时，剪辑区域不会改变。

我的CSS看起来像这样：

#map figure {
    background-color: rgb(70,76,222);
    color: white;
    width: 150px;
    border-radius: 15px;
    position: absolute;
    z-index: 1;
    clip: rect(0px, 20px, 20px, 0px);
}

figure:hover {
    clip: rect(0px, 150px, 150px, 0px);
    z-index: 2;
}

HTML看起来像

<figure id="point1">
    <img src="image1.jpg" alt="" />
    <figcaption>
       <time>5:30 a.m.</time> Stop at Mills Moraine for a 
       view of the sunrise.
    </figcaption>
</figure>

你能告诉我为什么剪辑矩形在悬停时不会改变吗？

Answer 1

这是因为选择器#map figure是more specific而不是选择器figure:hover。您需要增加第二个选择器的specificity，以便在将鼠标悬停在元素上时覆盖第一个选择器：

Example Here

#map figure:hover {
    clip: rect(0px, 150px, 150px, 0px);
    z-index: 2;
}

对于它的价值，这里是每个选择器的specificity calculation：

#map figure - 101
figure:hover - 11
#map figure:hover - 111

悬停剪辑不起作用

1 个答案: