作者:冷向泽 | 来源:互联网 | 2023-05-24 12:15
我已经根据本教程设置了一些图像悬停样式,它使用before
和after
伪元素创建悬停样式.
工作(和外观)很棒,但我需要能够在悬停内容中插入按钮/链接,但由于这是在伪元素上设置的样式,因此after
阻止了按钮/链接的可点击性.
它看起来像下面,我已经设置了一个jsfiddle来演示我想要做什么 - 正如你会注意到的,链接在悬停时无法点击,我想知道是否有人可以提出一个简单的制作方法此链接可单击,而无需完全更改其结构的方式.
默认状态
悬停状态
.media {
display: inline-block;
position: relative;
vertical-align: top;
}
.media__image { display: block; }
.media__body {
background: rgba(41, 128, 185, 0.7);
bottom: 0;
color: white;
font-size: 1em;
left: 0;
opacity: 0;
overflow: hidden;
padding: 3.75em 3em;
position: absolute;
text-align: center;
top: 0;
right: 0;
-webkit-transition: 0.6s;
transition: 0.6s;
}
.media__body:hover { opacity: 1; }
.media__body:after,
.media__body:before {
border: 1px solid rgba(255, 255, 255, 0.7);
bottom: 1em;
content: '';
left: 1em;
opacity: 0;
position: absolute;
right: 1em;
top: 1em;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: 0.6s 0.2s;
transition: 0.6s 0.2s;
}
.media__body:before {
border-bottom: none;
border-top: none;
left: 2em;
right: 2em;
}
.media__body:after {
border-left: none;
border-right: none;
bottom: 2em;
top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.media__body h2 { margin-top: 0; }
.media__body p { margin-bottom: 1.5em; }
1> fcalderan..:
一个CSS3
-只(实际移至CSS4
规范)的解决办法是pointer-events
财产,如
.media__body:hover:after,
.media__body:hover:before {
...
pointer-events: none;
}
支持所有现代浏览器,但仅限于IE11
(在HTML/XML内容上)
示例:http://jsfiddle.net/8uz7mx6h/
在旧的IE上也支持的另一种解决方案是在段落中应用position: relative
a z-index
,例如
.media__body p {
margin-bottom: 1.5em;
position: relative;
z-index: 1;
}
示例:http://jsfiddle.net/0nrbjwmg/2/