使用'position absolute'的CSS div隐藏内容

Question

我正在尝试使用以下设置让角点按钮在悬停时显示新内容：

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
// navigationCmp.vue
<div id="app">
  <aside class="left-side sidebar-offcanvas">
    <section class="sidebar">
      <div id="menu" role="navigation">
        <navigation-cmp :routes="routes"></navigation-cmp>
      </div>
    </section>
  </aside>
</div>

<template id="nav-template">
  <ul class=" navigation ">
    <template v-for="item in routes ">

      <template v-if="item.parent==0 ">
        <template v-if="!!item.children ">
          <li class="menu-dropdown ">
            <a href="javascript:void(0) ">
              <i class="menu-icon ti-check-box "></i>
              <span class="mm-text ">{{ item.name }}</span>
              <span class="fa arrow "></span>
            </a>
            <ul class="sub-menu ">
        </template>
        <template v-if="!item.children ">
          <router-link to="/ " tag="li " exact>
            <a class="logo "><i class="menu-icon ti-desktop "></i><span class="mm-text ">{{ item.name }}</span></a>
          </router-link>
        </template>
      </template>

      <template v-if="!!item.children " v-for="child in item.children ">
        <template v-if="!!child.children ">
          <a href="javascript:void(0) ">
            <i class="fa fa-fw ti-receipt "></i> {{ child.name }}
            <span class="fa arrow "></span>
          </a>
          <ul class="sub-menu form-submenu ">
        </template>
        <template v-if="!child.cildren ">
          <router-link tag="li " to="/form-elements " exact>
            <a class="logo "><i class="menu-icon ti-cup "></i><span class="mm-text "> {{ child.name }} </span></a>
          </router-link>
        </template>

        <navigation-cmp v-if='!!child.children&&child.children.length>0' :routes='[child]'> </navigation-cmp>

        <template v-if="!!child.children ">
          </ul>
        </template>

      </template>


      <template v-if="!!item.children&&item.parent==0 ">
        </ul>
        </li>
      </template>

    </template>

  </ul>
</template>

CSS：

<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 -->

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

悬停部署运行良好，但如果.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; } 使用.overlay-content，则.amg-corner-button_wrap文字不会显示。但是我需要它来保持悬停在包裹上。

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

Answer 1

在你的css中添加这个类

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

Answer 2

我相信你可以在这里使用pointer-events属性。

从position: absolute;

中删除.amg-corner-button_wrap

将pointer-events: none;添加到.panel-default1

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

Working JSFiddle

Answer 3

您可以使用CSS3 transform属性缩放叠加层而不是使用边框，然后使用 General sibbling combinator [w3]选择器~选择前面带有.overlay-content的{​​{1}}元素。

Working fiddle