I have a background image inside a div. This background image only covers a part of the div. Is there a way to change the cursor to a pointer only when the background image is hovered?
Top left square is the background image.
This is the HTML code for the div.
<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>
The background image is set using 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;
}
I am aware that this can be done by wrapping the background image into another smaller div. But the there are 100s of checkbox-container
divs and I am wondering if there is a way to achieve this using CSS or JS without any structural change.
2
Answers
So with everything fixed, you can create a "fake" layout in the place of the image using
:before