在Wordpress站点上执行自定义css后,JS无法正常工作

Question

我目前正在通过wordpress开发一个在线商店.一切都很好,现在我想给我的页面一个自定义边框(倒圆角),并找到它的CSS代码,如下所示:

CSS:

body {
  background-color: #fff;
}

.wrapper {
  overflow:hidden;
  width:200px;
  height:200px;


}

div.inverted-corner {
  box-sizing:border-box;
  position: relative;
  background-color: #3e2a4f;
  height: 200px;
  width: 200px;
  border: solid grey 7px;
}

.top, .bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;

}

.top:before, .top:after, .bottom:before, .bottom:after{
  content:" ";
  position:absolute;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: solid grey 7px;
  border-radius: 20px; 
}

.top:before {
  top:-35px;
  left:-35px;


}

.top:after {
 top: -35px;
 right: -35px;
  box-shadow: inset 1px 1px 1px grey;
}

.bottom:before {
  bottom:-35px;
  left:-35px;
}

.bottom:after {
 bottom: -35px;
 right: -35px; 
 box-shadow: inset 1px 1px 1px grey;
}

HTML:

<div class="wrapper">
<div class="inverted-corner">
<div class="top">&nbsp; </div>
  <h1>Hello</h1>
  <div class="bottom"> </div>
</div>
  </div>

我将这些类重命名为与主题的现有css类没有冲突.它在这里工作得很好:我的网站.问题是现在,我不能再与网站互动,没有链接,没有悬停效果.似乎自定义css覆盖了实际站点.你有什么建议我可能做错了吗？

PS我编辑了header.php,使得倒角div和顶部div位于页面包装div(网站内容)的下方,在footer.php中,我编辑了顶部div和倒置在页面正上方的div-div div -wrapper div关闭.

Answer 1

添加:

pointer-events: none;

到.bottom-cornerCSS,所以鼠标通过.