html - 添加 ::after 伪元素后锚链接不起作用
问题描述
我已经在图像中添加了一个锚点,但它不起作用。当我一开始将鼠标悬停在图像上时,只能看到锚点,但之后光标是默认的。当我们使用 ::after 元素时我们可以不包括锚点还是我缺少什么?任何帮助将不胜感激
section.galleryimage .col-md-4 figure {
height: 235px;
overflow: hidden;
position: relative;
}
section.galleryimage .col-md-4 figure img {
height: 100%;
width: 100%;
}
section.galleryimage .col-md-4 figure:after {
content: "\f067";
font-family: fontawesome;
position: absolute;
height: 100%;
width: 100%;
background: rgba(41, 153, 195, 0.4);
top: -100%;
transition: 0.5s ease;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
}
section.galleryimage .col-md-4 figure:hover:after {
top: 0%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="galleryimage">
<div class="container">
<div class="row">
<div class="col-md-4">
<figure>
<a href="#">
<img src="http://jpninfo.com/wp-content/uploads/2017/08/coin-laundry-700.jpg">
</a>
</figure>
</div>
</div>
</div>
</section>
解决方案
推荐阅读
- c - 为什么使用 time.h 计算函数运行时返回 0 秒
- ansible - 有没有办法直接在模板中使用 jinja2 `range` 函数的列表输出?
- r - ggplot2 - 如何将 geom_dotplot 与 x 轴标签对齐?
- r - R正则表达式识别特定字符串后的数字
- sql - 在 SQL 中组合 3 个表并查找水果的计数
- node.js - 节点/npm 说“缺少脚本
" 即使它存在于当前目录中 - android - RecyclerView 上的对象列表
- go - 日志中的 Uber Zap 记录器函数名称
- entity-framework-core - 在 EF Core 中正确管理鉴别器
- arrays - 更改数组状态不会让子组件重新渲染