{"html":"\n","css":".deleteButton {\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 3px;\n background-color: transparent;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n overflow: hidden;\n}\n.deleteButton svg {\n width: 44%;\n}\n.deleteButton:hover {\n background-color: rgb(237, 56, 56);\n overflow: visible;\n}\n.bin path {\n transition: all 0.2s;\n}\n.deleteButton:hover .bin path {\n fill: #fff;\n}\n.deleteButton:active {\n transform: scale(0.98);\n}\n.tooltip {\n --tooltip-color: rgb(41, 41, 41);\n position: absolute;\n top: -40px;\n background-color: var(--tooltip-color);\n color: white;\n border-radius: 5px;\n font-size: 12px;\n padding: 8px 12px;\n font-weight: 600;\n box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.105);\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: all 0.5s;\n}\n.tooltip::before {\n position: absolute;\n width: 10px;\n height: 10px;\n transform: rotate(45deg);\n content: \"\";\n background-color: var(--tooltip-color);\n bottom: -10%;\n}\n.deleteButton:hover .tooltip {\n opacity: 1;\n}\n"}

slippery-fox-79

👁 实时预览

📝 源代码