文本跨度仅在鼠标悬停后呈现 [英] Text span only renders after mouseover
本文介绍了文本跨度仅在鼠标悬停后呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在建立一个网页，HTML/CSS/JS我正在使用动态脚本来呈现页面内容.
I´m building a webpage, HTML/CSS/JS Im using dynamic script to render the page content.
有一个文本部分，直到我用鼠标将其悬停时，它才能完全呈现.
There is a text section that won´t render totally until i hover it with the mouse.
在所有3个示例中，缺少的文本为< span class ="product-shipping"> .
The text missing is <span class="product-shipping"> on all the 3 examples.
任何想法都会有所帮助！
Any ideas would be helpfull!
(使其正常工作)在 title 中添加了 position:relative; 并在文本后面添加了一个空的< h3 id ="title"> .
(Got it working) Added position: relative; to title
and added empty <h3 id="title"> after the text.
.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样式.这样的事情.选择您需要的显示或可见性.
You might do it in the next way. If text that toggle placed inside hover/mouseover trigger you might just wrote a simple css style. Something like this. Choose what you need display or visibility.
.parent:hover .child {
display: block;
visibility: visible;
opacity: 1;
}
.child {
display: none;
visibility: hidden;
opacity: 0;
}
这篇关于文本跨度仅在鼠标悬停后呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
