html - 将鼠标悬停在文本幻灯片上以显示更多文本

Question

如果您将鼠标悬停在他们的左侧菜单上，“添加到文本”会向上滚动并显示更多文本您将如何在 css 中执行此操作？这非常简洁，但我不知道如何使用文本 https://www.rushordertees.com/designbeta/#/ 来做到这一点

知道如何将此代码应用于此 div 菜单中的每个 li，以便它可以执行您设置的转换吗？

  <div class="col-left">
<div class="text-center product-btn-info">      
    <a href="javascript:void(0)" <?php echo cssShow($settings, 'show_product_info'); ?> data-target="#modal-product-info" data-toggle="modal" class="btn btn-default pull-left btn-sm"><i class="fa fa-info"></i> <span><?php echo lang('design_product_info'); ?></span></a>
    <a href="javascript:void(0)" <?php echo cssShow($settings, 'show_product_size'); ?> data-target="#modal-product-size" data-toggle="modal" class="btn btn-default pull-right btn-sm"><i class="fa fa-male"></i> <span><?php echo lang('design_size_chart'); ?></span></a>
</div>

<div id="dg-left" class="width-100">
    <div class="dg-box width-100">
        <ul class="menu-left">

            <li <?php echo cssShow($settings, 'show_product'); ?>>
                <a href="javascript:void(0)" class="view_change_products" title="" data-toggle="modal" data-target="#dg-products">
                    <i class="glyphicons t-shirt"></i> <?php echo  lang('designer_menu_choose_product'); ?>
                </a>
            </li>           

            <li <?php echo cssShow($settings, 'show_add_text'); ?>>
                <a href="javascript:void(0)" class="add_item_text" title="">
                    <i class="glyphicons text_resize"></i> <?php echo lang('designer_menu_add_text'); ?>
                </a>
            </li>

            <li <?php echo cssShow($settings, 'show_add_art'); ?>>
                <a href="javascript:void(0)" class="add_item_clipart" title="" data-toggle="modal" data-target="#dg-cliparts">
                    <i class="glyphicons picture"></i> <?php echo lang('designer_menu_add_art'); ?>
                </a>
            </li>                           
            <li <?php echo cssShow($settings, 'show_add_upload'); ?>>
                <a href="javascript:void(0)" title="" data-toggle="modal" data-target="#dg-myclipart">
                    <i class="glyphicons camera"></i> <?php echo lang('designer_menu_upload_image'); ?>
                </a>
            </li>

            <li <?php echo cssShow($settings, 'show_add_team'); ?>>
                <a href="javascript:void(0)" class="add_item_team" title="">
                    <i class="glyphicons cup"></i> <?php echo lang('designer_menu_name_number'); ?>
                </a>
            </li>
            <li <?php echo cssShow($settings, 'show_add_qrcode'); ?>>
                <a href="javascript:void(0)" class="add_item_qrcode" title="">
                    <i class="glyphicons qrcode"></i> <?php echo lang('designer_menu_add_qrcode'); ?>
                </a>
            </li> 

            <li <?php echo cssShow($settings, 'show_product_size'); ?>>
                <a href="javascript:void(0)" class="add_item_mydesign">
                    <i class="glyphicons brush"></i> <?php echo lang('designer_menu_my_design'); ?>
                </a>
            </li>               

            <?php $addons->view('menu-left'); ?>
        </ul>
    </div>

Answer 1

这是一个使用与您喜欢的网站相同的技术隐藏/显示文本的示例。

.main-menu-toolbar {
  position: relative;
  width: 75px;
  height: -webkit-calc(80% - 100px);
  height: calc(80% - 100px);
  z-index: 2;
  float: left!important
}
.main-menu-toolbar.active .main-menu-toolbar-icon-label {
  max-height: 15px
}
.main-menu-intro {
  position: relative;
  width: 300px;
  height: -webkit-calc(80% - 100px);
  height: calc(80% - 100px);
  background: #fff;
  z-index: 1;
  float: left!important
}
@media (max-width: 767px) {
  .main-menu-intro {
    display: none!important
  }
}
.main-menu-intro-row {
  display: table;
  width: 200px;
  height: 19%;
  min-height: 72px;
  border-right: 4px solid;
  -webkit-transition: color .25s linear, background-color .25s linear, border-right-color .25s linear;
  transition: color .25s linear, background-color .25s linear, border-right-color .25s linear
}
.main-menu-intro-row:hover,
.main-menu-intro-row.hover {
  background-color: #eee;
}
.main-menu-intro-row:hover .main-menu-intro-desc .small,
.main-menu-intro-row.hover .main-menu-intro-desc .small {
  max-height: 40px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.main-menu-intro-desc {
  display: table-cell;
  width: 150px;
  padding-left: 15px;
  padding-right: 25px;
  vertical-align: middle;
}
.main-menu-intro-desc strong {
  font-size: 18px
}
.main-menu-intro-desc .small {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .25s linear;
  transition: max-height .25s linear
}
div {
  display: block;
  !important
}

<div class="main-menu-toolbar">
    <div class="main-menu-intro-row">
      <div class="main-menu-intro-desc"><strong>Add Text</strong>
        <div class="small">Overflow text goes here</div>
      </div>
     </div>
  </div>