javascript - 文本跨度仅在鼠标悬停后呈现
问题描述
我正在构建一个网页,HTML/CSS/JS 我使用动态脚本来呈现页面内容。
缺少的文本<span class="product-shipping">
在所有 3 个示例中。
任何想法都会有所帮助!
编辑:(得到它的工作)在文本之后添加position: relative;
并添加title
空。<h3 id="title">
.product-grid8 .title {
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
margin: 0 0 30px;
transition: all .3s ease 0s;
position: relative;
}
h3.h3 {
text-align: center;
margin: 1em;
text-transform: capitalize;
font-size: 1.7em;
}
/********************* Shopping Demo-8 **********************/
.product-grid8 {
font-family: Poppins, sans-serif;
position: relative;
z-index: 1
}
.product-grid8 .product-image8 {
border: 1px solid #e4e9ef;
position: relative;
transition: all .3s ease 0s
}
.product-grid8:hover .product-image8 {
box-shadow: 0 0 10px rgba(0, 0, 0, .15)
}
.product-grid8 .product-image8 a {
display: block
}
.product-grid8 .product-image8 img {
width: 100%;
height: auto
}
.product-grid8 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid8:hover .pic-1 {
opacity: 0
}
.product-grid8 .pic-2 {
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: all .5s ease-out 0s
}
.product-grid8:hover .pic-2 {
opacity: 1
}
.product-grid8 .social {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
bottom: 13px;
right: 13px;
z-index: 1
}
.product-grid8 .social li {
opacity: 0;
transform: translateY(3px);
transition: all .5s ease 0s
}
.product-grid8:hover .social li {
margin: 0 0 10px;
opacity: 1;
transform: translateY(0)
}
.product-grid8:hover .social li:nth-child(1) {
transition-delay: .1s
}
.product-grid8:hover .social li:nth-child(2) {
transition-delay: .2s
}
.product-grid8:hover .social li:nth-child(3) {
transition-delay: .4s
}
.product-grid8 .social li a {
color: grey;
font-size: 17px;
line-height: 40px;
text-align: center;
height: 40px;
width: 40px;
border: 1px solid grey;
display: block;
transition: all .5s ease-in-out
}
.product-grid8 .social li a:hover {
color: #000;
border-color: #000
}
.product-grid8 .product-discount-label {
display: block;
padding: 4px 15px 4px 30px;
color: #fff;
background-color: #0081c2;
position: absolute;
top: 10px;
right: 0;
-webkit-clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%)
}
.product-grid8 .product-content {
padding: 20px 0 0;
color: white
}
.product-grid8 .price {
color: #242424;
font-size: 19px;
font-weight: 400;
margin-bottom: 8px;
text-align: left;
transition: all .3s
}
.product-grid8 .price span {
color: #999;
font-size: 14px;
font-weight: 500;
text-decoration: line-through;
margin-left: 7px;
display: inline-block
}
.product-grid8 .product-shipping {
color: grey;
font-size: 15px;
margin: 0 0 15px;
display: block;
position: relative
}
.product-grid8 .title {
font-size: 16px;
font-weight: 400;
text-transform: capitalize;
margin: 0 0 30px;
transition: all .3s ease 0s
}
.product-grid8 .title a {
color: #000
}
.product-grid8 .title a:hover {
color: #0081c2
}
.product-grid8 .all-deals {
display: block;
color: #fff;
background-color: #2e353b;
font-size: 15px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 22px 5px;
transition: all .5s ease 0s
}
.product-grid8 .all-deals .icon {
margin-left: 7px
}
.product-grid8 .all-deals:hover {
background-color: #0081c2
}
@media only screen and (max-width:990px) {
.product-grid8 {
margin-bottom: 30px
}
}
<div id="page-wrap" style="height: auto px;">
<div class="row" id="main-content">
<div class="col-sm-12" id="guts">
<h2 style="color: #242424">Test</h2>
<br>
<div class="container-ourdogs">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="product-grid8">
<div class="product-image8">
<a href="#">
<img class="pic-1" src="https://i.ibb.co/my30707/teste1.png">
<img class="pic-2" src="https://i.ibb.co/qWsDm3V/teste2.png">
</a>
</div>
<div class="product-content">
<div class="price">Rusty Viking
</div>
<span class="product-shipping">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dictum purus, at tempus risus. Integer sapien nisl, pellentesque eu iaculis ut, luctus ac ligula. Praesent eu risus nunc.</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="product-grid8">
<div class="product-image8">
<a href="#">
<img class="pic-1" src="https://i.ibb.co/my30707/teste1.png">
<img class="pic-2" src="https://i.ibb.co/qWsDm3V/teste2.png">
</a>
</div>
<div class="product-content">
<div class="price">Rusty Viking
</div>
<span class="product-shipping">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dictum purus, at tempus risus. Integer sapien nisl, pellentesque eu iaculis ut, luctus ac ligula. Praesent eu risus nunc.</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="product-grid8">
<div class="product-image8">
<a href="#">
<img class="pic-1" src="https://i.ibb.co/my30707/teste1.png">
<img class="pic-2" src="https://i.ibb.co/qWsDm3V/teste2.png">
</a>
</div>
<div class="product-content">
<div class="price">Rusty Viking
</div>
<span class="product-shipping">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dictum purus, at tempus risus. Integer sapien nisl, pellentesque eu iaculis ut, luctus ac ligula. Praesent eu risus nunc.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
你可以用下一个方法来做。如果切换放置在悬停/鼠标悬停触发器内的文本,您可能只写了一个简单的 CSS 样式。像这样的东西。选择您需要显示或可见性的内容。
.parent:hover .child {
display: block;
visibility: visible;
opacity: 1;
}
.child {
display: none;
visibility: hidden;
opacity: 0;
}
推荐阅读
- docker - ECS 优化的 AMI 支持 Docker compose v2 和 v3 规范
- java - 嵌套 If 语句
- laravel - Gitlab CI/CD 无法下载私有作曲家包
- airflow - 是否可以将空列表设置为 Airflow 中的变量?
- r - 使用 dplyr 的 group_by 函数,有没有办法对单个变量的范围进行分组?
- azure - 在没有应用的情况下测试 Azure 通知中心
- c# - C# 无法删除以前在窗口中打开的 pdf
- maven - docker容器内的Jenkins用户没有权限
- javascript - Javascript正则表达式匹配由一对字符包围的项目?
- css - 尝试在标签旁边对齐输入字段