我有一個div內部的背景圖像。這個背景圖像只覆蓋了div的一部分。有沒有辦法只在背景圖片懸停的時候把光標改成指針？

左上角的方塊是背景圖像。

這是div的HTML代碼。

<div class="checkbox-container see-value-demo-checkbox">
    1-hour recording <a href="/courses/71"><b>Media and Optimization Workshop</b></a>  
    (Optimized for technical teams)
</div>

使用CSS設置背景圖像。

.checkbox-container {
    margin: 20px 0px;
    background-image: url(/ui-icons/Checbox-Not-Selected-Grey.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding-left: 40px;
}

我知道這可以通過將背景圖像包裝到另一個更小的div中來實現。但是有數百個復選框容器div，我想知道是否有一種方法可以使用CSS或JS在不做任何結構改變的情況下實現這一點。

因此，只要一切都解決了，您就可以創建一個& quot假的& quot使用:before在圖像位置進行布局

.checkbox-container {
    margin: 20px 0px;
    background-image: url(/ui-icons/Checbox-Not-Selected-Grey.png);
    background-repeat: no-repeat;
    background-position: top left;
    padding-left: 40px;
      position: relative;
    width: 200px; /* Just for the sake of the demo */
}
.checkbox-container:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 30px; /* Just demo, you can change it to match your image size */
      height: 30px; /* Just demo, you can change it to match your image size */
      background: green; /* Just demo since i can't show the image, you can delete it later */
    border-radius: 6px; /* Just demo, you can change it to match your image radius or outright delete it, doesn't matter much */
      cursor: pointer;
}

<div class="checkbox-container see-value-demo-checkbox">
    1-hour recording <a href="/courses/71"><b>Media and Optimization Workshop</b></a>  
    (Optimized for technical teams)
</div>