Question

如果将鼠标悬停在左侧菜单上，＆＃34;添加到文字＆＃34;向上滚动并显示更多文本如何在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>

Answer 2

看起来他们在悬停时使用CSS转换来向上滑动文本。这是一个基本示例，显示当鼠标悬停在段上时如何将段落向上移动50px。

p {
    -webkit-transition: all .2s; /* Safari */
    transition: all .2s;
}

p:hover {
    -ms-transform: translateY(-50px); /* IE 9 */
    -webkit-transform: translateY(-50px); /* Safari */
    transform: translateY(-50px);
}

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

2 个答案: