html - 代码一直试图打开图像的弹出窗口——这不是我的意图
问题描述
我有这个代码:
<div class="col-xl-3 col-lg-6 col-md-6">
<div class="portfolio-item">
<a href="1.html" class="set-bg port-pic" data-setbg="img/portfolio/1.jpg"></a>
<h2>We Are Okay</h2>
<p>Book design</p>
</div>
</div>
1.html
但是每次我点击链接(
我究竟做错了什么?
CSS 不是很有帮助,因为它似乎只设置了过渡、定位和大小:
/*---------------------
Portfolio section
----------------------*/
.portfolio-warp {
padding: 0 60px;
}
.portfolio-item h2 {
font-size: 24px;
margin-bottom: 5px;
}
.portfolio-item p {
font-size: 14px;
margin-bottom: 0;
}
.portfolio-item .port-pic {
margin-bottom: 30px;
display: block;
height: 280px;
background: #333;
background-position: center center;
background-size: cover;
overflow: hidden;
position: relative;
}
.portfolio-item .port-pic:after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 0;
background: #000;
opacity: 0;
z-index: 2;
-webkit-transition: all 0.4s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
-o-transition: all 0.4s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
transition: all 0.4s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
}
.portfolio-item:hover .port-pic:after {
opacity: 0.8;
height: 100%;
top: 0;
}
解决方案
推荐阅读
- javascript - 在发送标头之前等待来自 Chrome 原生消息传递应用程序的响应
- blazor - 在 Blazor 的 Startup 类中找不到 IComponentsApplicationBuilder 类型
- c++ - 使用花括号构造一个不使用 initializer_list 的对象
- javascript - Omit action in "if" statement in JavaScript
- python - Remove null columns from a pyspark dataframe
- python - 如何处理 + 不受支持的操作数类型:数据框中的“十进制.十进制”和“浮点数”
- spring-kafka - Kafka Listener Concurreny - How to handle Stop/Idle events fired from 6 threads
- javascript - 将变换连接到 Blendshape 权重 SparkAR
- python - 访问 mongodb 中数组的值并将其存储为 python 列表
- vue.js - Vue - 在 v-for 中加载动态下拉列表以进行编辑