时间戳

首页 > 解决方案 > 悬停时滑出小部件

html - 悬停时滑出小部件

问题描述

我想在带有文本的悬停小部件上滑出。我想用主标题制作半圆。当您将鼠标悬停在半圆上时，应该会出现文本。我现在站在上面

屏幕

我的实际代码：

<div class="col-md-4 box_industries">
 <div>
     <div class="image fill">
         O nas
     </div>
     <div class="content">
         <h5>O nas</h5>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula auctor vulputate. Aenean massa lectus, tempor hendrerit faucibus eu, euismod sit amet lorem. Aliquam ante arcu, tempor id augue eget, tristique tincidunt ipsum. Phasellus dignissim eu nisl in commodo. Maecenas erat diam, tristique eu arcu vulputate, vehicula vulputate tellus.
     </div>
 </div>
 </div>  

.box_industries
{
  background: grey;
  overflow: hidden;
  text-align: center;
  position: relative;
  min-height:300px;
  border-radius:999px;
  color:#fff;
}

.box_industries .content
{
  background: rgba( 0, 0, 0, 0.9 );
  bottom: -100%;
  color: #fff;
  height: 100%;
  left: 0%;
  text-align: center;
  position: absolute;
  transition: bottom 0.5s ease;
  width: 100%;
  font-size:14px;
}
.box_industries:hover .content
{
  bottom: 0%;
}

标签： htmlcss

解决方案

尝试使用 CSS :hover选择器。示例：div:hover {top: 100px;}但仅当鼠标仍在元素上时才会起作用，或者您可以使用 JS更改顶部document.getElementById("elem").style.top = "100px";：但是如果光标离开元素，它将具有顶部100px（不是过去的值）；

推荐阅读