Question

我已经使用stylized page来练习JavaScript，但最近我发现我的一些CSS阻止了我的文档监听器听到针对嵌入式元素的鼠标点击超越了罪魁祸首CSS的目标。

Culprit CSS

＆＃13;

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

＆＃13;

为了避免这个问题，我实施了一个父div分类为wrapper并嵌入backDrop以及两个姐妹div分类backDrop_leftShadow和{{1它的每一面。然后我创建了两个交替定向的水平渐变背景图像，从黑色渐变到透明，并将它们分配给我的“翼”的CSS。 backDrop_rightShadow秒。

每个div遵循正常的缩进方案，但我必须使用div将它们彼此分开，以防止空白区域弄乱渲染的布局。在那里，我将和viewWidth CSS从margin移至backDrop，并将wrapper单位替换为viewWidth中的百分比和像素单位。我制作的渐变是7像素宽，所以我backDrop比wrapper宽14像素，每翼backDrop宽7像素。然后我尝试了div我在display: inline-block, inline, block;内的每个姐妹div的CSS中想到的每一个组合 - 但似乎没有任何效果。

＆＃13;

wrapper

＆＃13;

var element = document.getElementById("addItem");
element.addEventListener('click', promptFunction);

function promptFunction() {
  element.innerHTML = square(window.prompt('inputvar'));
}

function square(x) {
  return x * x;
}

＆＃13;

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

＆＃13;

注意：我尝试将渐变上传到图片托管网站，以便可以从这里加载，但我似乎也无法正常工作。如果有人知道怎么回事，我会很乐意解决这个问题。 - 更有趣的是，确切的代码产生两种不同的渲染，这取决于它是否被渲染locally或通过stackoverflow。当this成为我的目标时。或者更确切地说，正如我已经说过的那样，this。 - ＆＃39; STACKOVERFLOW＆＃39;和＆＃39; LOCAL＆＃39;使用图像编辑器编辑了文本。

Answer 1

您尝试的第一个解决方案的问题与伪元素的定位有关。因为它有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>

第二部分涉及使用百分比作为高度值。需要设置父母的高度，否则百分比将失败（因为0的100％为0）。

如何添加阴影＆＃39;翅膀＆＃39;到一个居中的内容div

1 个答案: