Question

我有一个父div

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

然后我在里面有一个孩子

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

在孩子的内心，我有一个按钮。该按钮具有background-image设置

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

我的问题：当cursor:pointer的任何部分悬停时，光标变为#myChildDiv。如果仅在cursor上悬停时，如何将#backgroundIndiseChild更改为指针？

Answer 1

根据评论中提供的说明，我认为您根本不需要#myChildDiv上的高度和宽度设置。您可以使用下面代码段中的内容。我使用了content属性而不是background-image，并将height和width设置为50％。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

要使content垂直居中，您可以使用下面代码段中提到的方法，如果您的图片总是高度为25％，父级宽度为50％。它将图像的容器绝对定位在top的50％，然后使用transform: translateY(-50%)垂直居中。这是我建议的方法。（注意：我使用视口单元vh作为父级来说明响应性）。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

背景图像悬停状态

1 个答案: