background-image hover state

Question

I've got a parent div

#myParentDiv{
   width: 100px;
   height: 200px;
}

Then I've got a child div inside it

#myChildDiv{
   width: 100%;
   height: 100%;
}

inside of the child, I've got a button. The button has a background-image set

#backgroundIndiseChild{
   background-image: url(/img/img.jpg);
   background-repeat: no-repeat;
   background-size: 50%;
   cursor: pointer;
}

My question: The cursor changes to cursor:pointer when hovered over any part of #myChildDiv. How do I make the cursor change to pointer only when hovered over #backgroundIndiseChild ?

Answer 1

Based on the clarification provided in comments, I don't think you need the height and width setting on the #myChildDiv at all. You could just use something like in the below snippet. I have used the content property instead of the background-image and set the height and width to 50%.

#myParentDiv {
  width: 100px;
  height: 200px;
  border: 1px solid #f60;
}
#backgroundIndiseChild {
  content: url(http://lorempixel.com/100/100);
  background-repeat: no-repeat;
  width: 50%;
  height: 50%;
  cursor: pointer;
}

<div id="myParentDiv">
  <div id="myChildDiv">
    <div id="backgroundIndiseChild"></div>
  </div>
</div>

To vertically center the content, you could use the approach mentioned in the below snippet if your image is always going to be 25% height and 50% width of the parent. It positions the image's container absolutely at 50% from the top and then uses transform: translateY(-50%) to vertically center it. This is the approach I would suggest. (Note: I have used viewport units vh for the parent to illustrate responsiveness).

#myParentDiv {
  position: relative;
  width: 30vh;
  height: 60vh;
  border: 1px solid #f60;
}
#backgroundIndiseChild {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: url(http://lorempixel.com/100/100);
  background-repeat: no-repeat;
  width: 50%;
  height: 25%;
  cursor: pointer;
}

<div id="myParentDiv">
  <div id="myChildDiv">
    <div id="backgroundIndiseChild"></div>
  </div>
</div>