Question 174011 in CSS Question posted in
Some basic documentation can be found here.

Change the cursor to pointer when hover on the background image using CSS

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.
enter image description here

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.

Tags:

2

Answers


  1. 0

    So with everything fixed, you can create a "fake" layout in the place of the image using :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>
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
<head>
  <style>
    .avator {
      background-image: url('https://i.imgur.com/gGxd3nm.jpeg');
      background-size: cover;
      background-position: center;
      height: 60px;
      width: 60px;
      position: relative;
      border-radius: 10px;
    }

    .avator:hover {
      cursor: pointer;
    }

    .parent_box {
      display: flex;
      justify-content: space-evenly;
      align-items: start;
      width: 400px;
    }

    .content {
      top: 0;
      width: 300px;
      color: gray;
      font-family: sans-serif;
      font-size: 20px;
      padding: 10px;
      text-align: justify;
    }

    .blue-text {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="parent_box">
    <div class="avator"></div>
    <p class="content">1-hour recording <span class="blue-text">Media and Optimization Workshop</span> (Optimized for
      technical teams)</p>
  </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search