html - 悬停剪辑不工作

Question

我正在尝试使用 CSS 将一个图形裁剪为 20 像素，然后在我将鼠标悬停在它上面时显示完整的图形。但是，当我将鼠标悬停在它上面时，剪辑区域不会改变。

我的 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;
}

就其值(value)而言，这里是 specificity calculation每个选择器的:

• #map figure - 101
• 图:悬停 - 11
• #map figure:hover - 111