主页 / 问题 / 551690
Accepted
Naddyson
Asked:2020-08-04 03:23:54 +0000 UTC2020-08-04 03:23:54 +0000 UTC

关于高亮div互相压着的问题

  • 772

当将鼠标悬停在一个块上时，我希望它从各个方面都突出显示，但这不起作用，因为相邻的块叠加在突出显示上（在下图和左侧的图片中）。 在此处输入图像描述

#square {
  width: 100px;
  height: 100px;
  float: left;
  background-color: red;
}
#square:hover {
  box-shadow: 0px 0px 10px #F0FFF0;
}
#workspace {
  width: 800px;
  height: 1200px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
<div id="workspace">
  <div id="square"></div>
  <div id="square"></div>
  <div id="square"></div>
  ...
  <div id="square"></div>
  <div id="square"></div>
</div>

html

2 个回答

  1. 添加： 

        #square {
        z-index: 0;
        position: relative;
    }

    #square:hover {
        z-index: 1;
    }

    PS：不好用我的id，还是上课比较好。

    • 1
  2. Best Answer
    box-shadow: 0px 0px 20px #F0FFF0 inset;

    例子

    • 0

相关问题