CSS3是一种能够为网页带来更好视觉体验的技术,其中一个非常好的特性就是触碰显示文字。触碰显示文字即当鼠标经过文字时,会显示出更多的信息或描述,让用户获得更多的内容。下面我们来看看如何实现这个特性。
HTML 代码: <div class="Box"> <p>这是一段普通的文字,当鼠标经过时会显示出更多的内容。</p> <p class="description">这里是描述文字。</p> </div>
首先,我们需要一个包裹文字的div,其中包含一个普通的段落和一个拥有更多描述信息的段落。接着,在CSS中定义.Box的样式:
CSS 代码: .Box { position: relative; display: inline-block; } .description { position: absolute; top: -30px; left: 0; background-color: #333; color: #fff; padding: 10px; opacity: 0; transition: opacity 0.3s ease-in-out; } .Box:hover .description { opacity: 1; }
CSS代码主要分为三部分,第一部分定义.Box的基本样式,因为我们需要在其中使用position定位和opacity属性,所以需要将其设置为relative。第二部分是定义.description的样式,包括它的位置、背景颜色、内边距、颜色等。其中,我们使用了opacity将其初始设置为不可见,并使用transition来添加渐变动画效果。最后一部分是针对鼠标悬停的效果,将.description的opacity值设置为1,让它显示出来。