css - 使用这些功能裁剪矩形、zindexing 和设置与另一个图像重叠的图像坐标

Question

我正在尝试让图像覆盖 map 图像并拥有它，因此当将鼠标悬停在图像上时，它们会将 z-index 增加到 2 并随着更多信息变大。

目前我无法更改位置或让图形框悬停和放大。

这是html代码:

  <nav class="vertical">
     <ul>
        <li><a href="#">Home Page</a></li>
        <li><a href="#">Black Canyon Map</a></li>
        <li><a href="#">Black Lake Map</a></li>
        <li><a href="#">Continental Divide Map</a></li>
        <li><a href="#">Estes Cone Map</a></li>
        <li><a href="#">Flattop Map</a></li>
        <li><a href="#">Meeker Map</a></li>
        <li><a href="#">Odessa Map</a></li>
        <li><a href="#">Longs Peak Map</a></li>
        <li><a href="#">Lumpy Ridge Map</a></li>
        <li><a href="#">Petit Grepon Map</a></li>
        <li><a href="#">Sky Pond Map</a></li>
        <li><a href="#">Trail Ridge Road Map</a></li>
        <li><a href="#">Twin Sisters Map</a></li>
     </ul>
  </nav>



  <section id="summary">
     <h1>Longs Peak Interactive Map</h1>
     <p>
        At 14,255 feet, Longs Peak towers above all other summits in 
        Rocky Mountain National Park. The summer is the only season 
        in which the peak can be climbed by a non-technical route. 
        Early mornings break calm, but clouds build in the afternoon sky, 
        often exploding in storms of brief, heavy rain, thunder and 
        dangerous lightning. Begin your hike early, way before dawn, 
        to be back below timberline before the weather turns for 
        the worse.
     </p>
     <p>
        The Keyhole Route, Longs Peak's only non-technical hiking 
        pathway, is a 16 mile round trip with an elevation gain of 
        4,850 feet. Though non-technical, the Keyhole Route is still 
        challenging and is not recommended for those who 
        are afraid of heights or exposed ledges. Hikers should be 
        properly outfitted with clothing, food, and water. Use caution 
        when ascending or descending steep areas. Don't be afraid to 
        back down when bad weather threatens.
     </p>
     <p>
        Move your mouse pointer over the numbered landmarks in the 
        map to preview the hike.
     </p>
  </section>



  <section id="map">
     <figure id="point0">
        <img src="image0.jpg" alt="" />
        <figcaption>
           <time>3:30 a.m.</time> Start from the Longs Peak Ranger
           Station, nine miles south of Estes Park. Be sure to pack 
           food, extra water, 
           sunblock, warm clothes, gloves, and caps.
        </figcaption>
     </figure>

     <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>

     <figure id="point2">
        <img src="image2.jpg" alt="" />
        <figcaption>
           <time>7:30 a.m.</time> Time for a break at Granite Pass.
        </figcaption>
     </figure>

     <figure id="point3">
        <img src="image3.jpg" alt="" />
        <figcaption>
           <time>8:30 a.m.</time> Climb through the Boulder Field 
           on the way to the Keyhole.
        </figcaption>
     </figure>

     <figure id="point4">
        <img src="image4.jpg" alt="" />
        <figcaption>
           <time>9:00 a.m.</time> Stop at the
           Agnes Vaille shelter for a well-deserved breakfast.
        </figcaption>
     </figure>

     <figure id="point5">
        <img src="image5.jpg" alt="" />
        <figcaption>
           <time>9:30 a.m.</time> It's time to go through
           the Keyhole. Be prepared for heavy winds.
        </figcaption>
     </figure>

     <figure id="point6">
        <img src="image6.jpg" alt="" />
        <figcaption>
           <time>10:00 a.m.</time> Follow the painted targets 
           along the Ledges.
        </figcaption>
     </figure>

     <figure id="point7">
        <img src="image7.jpg" alt="" />
        <figcaption>
           <time>11:00 a.m.</time> Take special care when crossing 
           the Narrows.
        </figcaption>
     </figure>

     <figure id="point8">
        <img src="image8.jpg" alt="" />
        <figcaption>
           <time>11:15 a.m.</time> You're almost there! Climb the
           Homestretch to reach the summit.
        </figcaption>
     </figure>

     <figure id="point9">
        <img src="image9.jpg" alt="" />
        <figcaption>
           <time>11:45 a.m.</time> Congratulations, you've reached 
           the top! Time for lunch and a few photos.
        </figcaption>
     </figure>

  </section>

这是有问题的 CSS 代码:

/* figure styles */

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

figure:hover {
clip: none;
z-index: 2;
}

figure figcaption {
font-size: 12px;
margin: 10px;
}

figure point0 {
left: 560;
top: 60;
}

figure point1 {
left: 277;
top: 90;
}

figure point2 {
left: 175;
top: 0;
}

figure point3 {
left: 110;
top: 115;
}

figure point4 {
left: 55;
top: 165;
}

figure point5 {
left: 5;
top: 180;
}

figure point6 {
left: 15;
top: 222;
}

figure point7 {
left: 50;
top: 245;
}

figure point8 {
left: 100;
top: 245;
}

#point9 {
left: 90;
top: 220;
}

可以看出，我尝试了一些不同的方法来让它工作。如果需要，我可以使用我拥有的整个 CSS 代码对其进行编辑，我对 CSS 还很陌生，不知道该怎么做才能让它发挥作用。

感谢任何输入!

Answer 1

也许，问题出在您的选择器上。

figure point0

必须替换为

figure#point0

因为“point0”是一个数字的id。