我需要一个使用自定义 CSS 隐藏和显示文本的解决方案

Question

我是初学者，正在使用 elementor 页面编辑器来构建网站。我需要帮助来放置自定义 CSS 代码，以便在鼠标离开时隐藏文本，并在鼠标移入该部分时显示文本。您可以从这里清楚地了解我的意思：https://crea.asia ...我的客户需要相同的结果。

Answer 1

.hoverTextMain {
display: block;
background: url(https://images.pexels.com/photos/4614987/pexels-photo-4614987.jpeg) no-repeat red;
background-size: cover;
height: 400px;
width: 500px;
text: align: center;
}
.hoverTextMain p {
padding: 20px;
color: #000;
font-size: 25px;
opacity: 0;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.hoverTextMain:hover p {
opacity: 1;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}

<div class="hoverTextMain">
<p>Lorem ipsum dolor sit amet</p>
</div>

请看例子是否可以。

Answer 2

根据你的解释，我做了一个非常基本的例子。当然，您需要研究更好的 CSS 和过渡。但如果这是你的客户，我想你会得到报酬。

因此，您可以通过使用

:hover

轻松制作此类东西并使用

display

，通过设置默认无并在悬停时阻止。

section{
  border: 1px solid black;
  min-height: 400px;
}
.description, section button{
  display:none;
}
section:hover .description, section:hover button{
  display: block;
}

<section>
  <h2>Title</h2>
  <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis pretium ipsum, nec pharetra augue porttitor vitae. Phasellus eget luctus eros, venenatis pharetra libero. Morbi volutpat turpis sed quam gravida lobortis sed sit amet eros. Nam in accumsan nibh. Donec placerat nulla magna, quis auctor dolor blandit quis. Morbi suscipit, est nec dignissim accumsan, risus nisl dapibus lectus, id ultrices sapien lectus nec urna. Mauris elementum maximus iaculis. Aenean arcu purus, scelerisque ut egestas id, auctor vel mi. In hac habitasse platea dictumst. Mauris convallis elit vitae consectetur laoreet. Fusce rutrum scelerisque purus, vitae pretium mauris ullamcorper a. Pellentesque malesuada vel massa eget dignissim. Quisque quis nisi ligula. Sed in dolor ac odio euismod vehicula. Suspendisse ornare nunc quis arcu iaculis efficitur.</div>
  <button>Read More</button>
</section