我正在处理 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 成为可点击的链接...
这可能吗?如果没有,我还能如何实现我所追求的目标?
最佳答案
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 - 您可以对左侧和右侧执行相同的操作,因此这对您来说可能是个不错的解决方案。
如果您觉得合适,请告诉我。
关于javascript - 我可以使用::before content 使 div 成为可点击的链接吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52159932/