CSS DIV隐藏内容

我想有一个角落按钮，使用下面的设置显示在悬停的新内容：CSS DIV隐藏内容

<div class="panel panel-default1"> 
    <div class="panel-body"> 
     <div class='amg-corner-button_wrap'>    
      <div class="overlay"></div> 
      <div class="overlay-content"> 
       <h2>Image Ink Logo</h2> 
       <p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p> 
      </div> 
     </div> <!-- wrap --> 
    </div> <!-- panel body --> 
</div> <!-- panel default -->

CSS：

.panel-default1 { 
    padding-top: 10px; 
    border-radius: 20px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.10); 
    height: 400px; 
    width: 100%; 
    overflow: hidden; 
    margin: 0 auto; 
    position: relative; 
} 

.amg-corner-button_wrap { 
    display: block; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 40px; 
    height: 40px; 
} 

.amg-corner-button_wrap .overlay { 
    border-bottom: 40px solid #e8c63d; 
    border-left: 40px solid transparent; 
    bottom: 0; 
    height: 0; 
    opacity: .95; 
    position: absolute; 
    right: 0; 
    text-indent: -9999px; 
    -moz-transition: all 0.5s ease-out; 
    -o-transition: all 0.5s ease-out; 
    -webkit-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
    width: 0; 
} 

.amg-corner-button_wrap:hover .overlay { 
    border-bottom: 800px solid #e8c63d; 
    border-left: 800px solid transparent; 
    -moz-transition: all 0.5s ease-out; 
    -o-transition: all 0.5s ease-out; 
    -webkit-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 

.amg-corner-button_wrap .overlay-content { 
    bottom: 0; 
    color: #333; 
    left: 0; 
    opacity: 0; 
    padding: 30px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    -webkit-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 
.amg-corner-button_wrap .overlay-content h2 { 
    border-bottom: 1px solid #333; 
    padding: 0 0 12px; 
} 
.amg-corner-button_wrap:hover .overlay-content { 
    opacity: 1; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    -webkit-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    -moz-transition-delay: 0.3s; 
    -o-transition-delay: 0.3s; 
    -webkit-transition-delay: 0.3s; 
    transition-delay: 0.3s; 
}

这里是提琴： https://jsfiddle.net/ar3jkuvq/

悬停部署效果很好，但如果.amg-corner-button_wrap使用position: absolute，.overlay-content文本不会显示。不过，我需要它将鼠标悬停在包裹上。

如何将悬停效果保留在换行上并同时显示文本内容？

来源

2017-09-10 mattvent

您可以使用CSS3 transform财产规模，而不是使用边框覆盖，并然后使用一个一般sibbling组合子 [w3]选择器~选择前面有.amg-corner-button_wrap:hover的.overlay-content元素。

Working fiddle

来源

2017-09-10 18:28:56 Deadfly

添加这个类在你的CSS

.amg-corner-button_wrap{ 
width:100%; 
height:100%; 
}

来源

2017-09-10 18:00:34 veera

我相信你可以使用pointer-events属性在这里。从.amg-corner-button_wrap

删除position: absolute;添加pointer-events: none;到.panel-default1

添加pointer-events: all;到.amg-corner-button_wrap .overlay

Working JSFiddle

来源

2017-09-10 18:03:40 ambs

CSS DIV隐藏内容

回答

相关问题