Question

我为我的WP页面创建了一个自定义部分。您可以在此处找到CSS和HTML：http://www.cssdesk.com/J469A

当您将鼠标悬停在图片上时，您会看到它将被我代码中的半透明背景替换。

但是，当我将代码插入我的WordPress网站时，它不会以这种方式工作。在悬停时，透明的backgorund只覆盖文本占用的区域，但不包括整个画面。

你可以看看这里：http://www.sflsupport.org/programs/这是最后一节（网络研讨会档案馆）

我该如何解决这个问题？

Answer 1

我认为问题出在display:table上，应该是display:block

尝试使用以下更新的CSS

span.text-content {
  background: rgba(26,33,43,0.9);
  color: white;
  cursor: pointer;
  /* display: table; updated to display:block below */
  display:block;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 20px;
  font-family: Roboto;
  line-height: 24px;
  font-weight: 200;
  text-align: center;
  box-sizing: border-box;
  padding-right: 25px;
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 25px;
  box-sizing: border-box;
 -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

Answer 2

请替换

span.text-content{
 display: table;
 ...
}

与

span.text-content{
 display: block;
 ...
}

自定义CSS在WordPress中无法正常工作

2 个答案: