在 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 类主题不冲突。它工作正常，如下所示：my site。现在的问题是，我无法再与网站互动，没有链接，没有悬停效果。似乎自定义 css 覆盖了实际站点。您对我可能做错的地方有什么建议吗？

P.S。我编辑了 header.php，使倒角 div 和顶部 div 位于页面包装器 div（站点内容）的正下方，并且在 footer.php 我编辑顶部 div 和倒角 div 关闭在页面包装器 div 关闭上方。

Answer 1

添加：

pointer-events: none;

到.bottom-cornerCSS，所以鼠标经过

Answer 2

在你的 custom.css 你有这个：

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

}

这基本上覆盖了整个页面，因此禁用了任何交互。

Answer 3

我想建议根据 css 规则更改的另一个选项

CSS

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

用下面的代码替换上面的代码

.top - corner, .bottom - corner {
    position: absolute;
    width: 100 % ; 
}

此解决方案适用于所有现代浏览器和 IE8 及更高版本（我不确定是否适用于较低版本的 IE，但它也可能适用于它们）

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

JS not working after doing custom css on Wordpress Site

javascript

css

wordpress

jquery

wordpress-theming