使用CSS将光标悬停在背景图像上时更改为指针

vd2z7a6w 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(128)

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

我知道这可以通过将背景图像 Package 到另一个更小的div中来完成。但是有100多个checkbox-container div，我想知道是否有一种方法可以使用CSS或JS来实现这一点，而不需要任何结构上的改变。

css

来源：https://stackoverflow.com/questions/76310937/change-the-cursor-to-pointer-when-hover-on-the-background-image-using-css

1条答案

按热度按时间

toe950271#

因此，在一切都固定之后，您可以使用: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>

赞(0）回复(0）举报 2023-05-30

我来回答

使用CSS将光标悬停在背景图像上时更改为指针

1条答案

相关问题

热门标签

最新问答