javascript - 我可以使用::before content 使 div 成为可点击的链接吗？

Question

我正在处理 Wordpress 网站的一些自定义样式，并且有一个特定的 DIV，我想让它可点击而不是使用其中的内容。由于网站使用的页面构建器，我发现这很困难，在我去创建整个自定义 HTML 内容之前，我想知道我是否可以通过 CSS 或 JS 修改模块，以便网站所有者仍然可以修改内容。

例如。

.container {
	width: 100%;
  height:400px;
}

.container .module-content {
	display: block;
  height:150px;
  bottom:0;
  position: absolute;
	width:100%;
	overflow:hidden;
	transition: ease .5s;
  color:white;
  text-align:center;
}

.container:hover .module-content {
	display: block;
  height:250px;
	overflow:visible;
}

.container .module-content .module-title {
	display: block;
	font-size:30px;
  height:100px;
	padding:50px 25px 0;
  margin:0;
	background: -moz-linear-gradient(top, rgba(66,114,184,0) 0%, rgba(66,114,184,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004272b8', endColorstr='#4272b8',GradientType=0 ); /* IE6-9 */
}	

.container .module-content .module-title a {
  color:white;
  text-decoration:none;
  }

.container .module-content .module-description {
	background-color:#4272b8;
	height: 50px;
  padding:25px;
  margin:0;
  color: white;
}

<div class="container"><!-- this is a 600x400 pixel box with an image for a background -->
      <div class="module-content"><!-- this is a 100px height div positioned absolutely and at the bottom with overflow hidden, when the container is hovered, the overflow becomes visible and height is 150px -->
        <div class="module-title"><h2><a href="/about/">About</a></h2></div><!-- this heading is the current link and is always visible -->
        <div class="module-description"><p>text</p></div><!-- this text is only visible when the container is hovered -->
      </div>
     </div>

正如您将在下图中看到的，我只能编辑标题文本(带或不带链接)、段落文本和容器背景。内容的定位由 CSS 覆盖完成。

我想也许我可以制作 H2 <a href></a>一个 block ，所以它覆盖了整个容器，但它塞满了“关于”文本的位置(它将它移到顶部，我希望它出现在底部)。

所以我想也许我可以使用::before 或::after 之类的伪代码和 content使容器 DIV 成为可点击的链接...

这可能吗？如果没有，我还能如何实现我所追求的目标？

Answer 1

Is this possible?

如果我没记错的话你不能给伪类链接

If not, how else could I achieve what I'm after?

对我来说，最简单的方法(但可能不是最好的方法)是使 h2 链接的区域更大，如下所示:

https://jsfiddle.net/9j516L2g/6/

.clickable-area {
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding-bottom: 20px;     
   margin-bottom: -20px; 
}

• display: inline-block 用于设置边距
• 位置必须是相对的
• z-index 用于将可点击区域保持在顶部(如果您在其他地方使用其他 z-index，请记住这一点)
• 填充增加了可点击的区域
• 负边距有助于不破坏周围的文字

上面的示例将在可点击区域多提供 20px - 您可以对左侧和右侧执行相同的操作，因此这对您来说可能是个不错的解决方案。

如果您觉得合适，请告诉我。