<template>
  <div>
    <div class="box1">
      <div class="box2">
        <div>滑鼠懸浮</div>
        <div>滑鼠懸浮</div>
        <div>滑鼠懸浮</div>
        <div>滑鼠懸浮</div>
      </div>
    </div>
  </div>
<
 
/template>

<style scoped lang='scss'>
.box1 {
  width: 200px;
  height: 150px;
  background: yellow;
  position: relative;
}
.box2 {
  position: absolute;
  width: 200px;
  height: 50px;
  background: red;
  bottom: 0;
  transition: height 0.5s;//過度時間
  word-wrap: break-word;     //超出自動換行
  overflow: hidden;
 
          //溢位隱藏
  white-space: nowrap;       //規定文字不進行換行
  text-overflow: ellipsis;   //當物件內文字溢位時顯示省略標記（...）
}
//hover顯示紅色
.box1:hover .box2 {
  height: 100px;
}
//邊框陰影
.box1:hover {
  box-shadow: 0 1px 30px 0 red;
}
</style>