| | |
|---|
| | | .table-container { |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-container:hover .icon-container { |
|---|
| | | opacity: 1; /* 鼠标悬停时显示图标 */ |
|---|
| | | } |
|---|
| | | .icon-container { |
|---|
| | | z-index: 1; |
|---|
| | | position: absolute; |
|---|
| | |
|---|
| | | height: 30px; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 30px; |
|---|
| | | transform: translateX(-50%); |
|---|
| | | transform: translate3d(-50%, 0, -20px); |
|---|
| | | border: 1px solid #EBEEF5; |
|---|
| | | background-color: #fafafa; |
|---|
| | | box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14); |
|---|
| | | border-radius: 2px; |
|---|
| | | transition: transform 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease; |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | .icon-container:hover{ |
|---|
| | | transform: translate3d(-50%, 0, 0); |
|---|
| | | box-shadow: 0 10px 10px 0 rgba(72, 119, 232, 0.34) |
|---|
| | | } |
|---|
| | | </style> |
|---|
