我有一个 stylized page我一直在使用它来练习 JavaScript，但最近我发现我的一些 CSS 阻止了我的文档监听器听到针对嵌入式元素的鼠标点击，超出了罪魁祸首 CSS 的目标。
罪魁祸首 CSS
.backDrop {
background-color: #FFF;
height: 100vh; width: 720px;
margin: auto;
/*box-shadow: creates ill-desired corners;*/
}
.backDrop:before {
box-shadow: 0 0 20px -20px black;/* shrinks and blurs for a soft shadow*/
content:'';
height: 200vh;
position: absolute; /* <-- THIS [but there's no shadow without it]*/
width: 720px;
}所以为了避免这个问题，我实现了一个父类 div分类 wrapper和嵌入式 backDrop和两个姐姐一起div分类backDrop_leftShadow和 backDrop_rightShadow到它的每一面。然后我创建了两个交替定向的水平渐变背景图像，从黑色渐变到透明，并将它们分配给我的“翅膀”的 CSS div
每个div遵循正常的缩进方案，但我不得不用 <!--comment--> 将它们彼此分开s 以防止空白弄乱呈现的布局。从那里我移动了 viewWidth和 margin CSS 来自 backDrop至 wrapper并替换了 viewWidth单位 backDrop百分比和像素单位。我制作的渐变宽度为 7 像素，所以我制作了 wrapper比 backDrop 宽 14 像素每个翅膀div 7 像素宽。然后我尝试了 display: inline-block, inline, block; 的所有组合我能想到的在CSS中给各位姐姐div里面wrapper --但似乎没有任何效果。
var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);
function promptFunction() {
element.innerHTML = square(window.prompt('inputvar'));
}
function square(x) {
return x * x;
}body {
background-color: #3A3C3D; /*alt color #CCA #3A3C3D*/
margin: 0;
overflow: hidden; /*top stop the extended shadow element height from causing the page to scroll*/
}
.backDrop {
background-color: #FFF; /*alt colors #ACA null #CCA*/
display: inline-block;
height: 100%; width: 720px;
}
.backDrop_leftShadow {
background-image: url("http://s14.postimg.org/7p3o980el/left_shadow.png");
background-repeat: repeat-y;
display: inline-block;
height: 100%;
width: 7px;
}
.backDrop_rightShadow {
background-image: url("http://s14.postimg.org/cc9qaznrh/right_shadow.png");
background-repeat: repeat-y;
display: inline-block;
height: 100%;
width: 7px;
}
.wrapper {
background-color: red;
width: 734px;
margin: auto;
}
.interface {
background-color: rgba(255, 0 , 0, 0);
background-image: url("../code/assets/experimenting pot/img/isometric platforms.png");
border-left: 2px solid red;
border-radius: 5px;
box-shadow: 0 0 5px -2px rgba(0,0,0,.4);
margin: auto;
height: 270px; width: 480px;
}
.lineBreak {
height: 16px;
}<body><!--All the comments you'll see below are meant to null white space between layout elements--><!--
--><div class="wrapper"><!--
--><div class="backDrop_leftShadow"></div><!--
--><div class="backDrop" id="backDrop"><!--
--><div class="lineBreak" id="addItem">click here to square</div><!--
--><div class="lineBreak"></div><!--
--><div class="interface">yo</div>
</div><!--
--><div class="backDrop_rightShadow"></div></div>
<!--<script language="javascript" type="text/javascript" src="../javascript/viewportControl.js"></script>-->
</body>注意:我试图将我的渐变上传到图像托管站点，以便可以从此处加载它们，但我似乎也无法使其正常工作。如果有人知道怎么做，我会很乐意解决这个问题。 --但更有趣的是，确切的代码产生了两种不同的渲染，仅取决于它是否被渲染 locally或通过 stackoverflow .当this这就是我想要的。或者更准确地说，正如我已经说过的，this . --“STACKOVERFLOW”和“LOCAL”文本是使用图像编辑器编辑的。
最佳答案
您尝试的第一个解决方案的问题与伪元素的定位有关。由于它有 position:absolute，它位于其他元素之上，这导致了问题。
您也可以通过使用 z-index 轻松解决该问题:如果您将 z-index 的值设置为 -1，该元素将位于堆栈，不会影响事件监听器。
这是使用您的代码的演示:
var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);
function promptFunction() {
element.innerHTML = square(window.prompt('inputvar'));
}
function square(x) {
return x * x;
}body {
background-color: #3A3C3D; /*alt color #CCA #3A3C3D*/
margin: 0;
overflow: hidden; /*top stop the extended shadow element height from causing the page to scroll*/
}
.backDrop {
background-color: #FFF;
height: 100vh; width: 720px;
margin: auto;
/*box-shadow: creates ill-desired corners;*/
}
.backDrop:before {
box-shadow: 0 0 20px black;/* shrinks and blurs for a soft shadow*/
content:'';
height: 200vh;
position: absolute; /* <-- THIS [but there's no shadow without it]*/
width: 720px;
z-index:-1;
margin-top:-20px; /* to avoid the issue with the borders that you commented */
}
.wrapper {
width: 734px;
margin: auto;
}
.interface {
background-color: rgba(255, 0 , 0, 0);
background-image: url("../code/assets/experimenting pot/img/isometric platforms.png");
border-left: 2px solid red;
border-radius: 5px;
box-shadow: 0 0 5px -2px rgba(0,0,0,.4);
margin: auto;
height: 270px; width: 480px;
}
.lineBreak {
height: 16px;
}<body><!--All the comments you'll see below are meant to null white space between layout elements--><!--
--><div class="wrapper"><!--
--><div class="backDrop" id="backDrop"><!--
--><div class="lineBreak" id="addItem">click here to square</div><!--
--><div class="lineBreak"></div><!--
--><div class="interface">yo</div>
</div></div>
<!--<script language="javascript" type="text/javascript" src="../javascript/viewportControl.js"></script>-->
</body>第二部分与使用百分比作为高度值有关。需要设置 parent 的高度，否则百分比会失败(因为 0 的 100% 是 0)。
关于html - 如何将阴影 'wings' 添加到居中的内容 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34439110/