这可能是一个解决方案:
#text_swlu3or4flh {
display:flex;
align-items:center;
gap:0.5rem;
transition: all .2s ease-out;
cursor:pointer;
}
#text_swlu3or4flh svg {
width: 20px;
height: 20px;
opacity:0;
}
#text_swlu3or4flh:hover svg {
opacity:1;
}
<div class="text" id="text_swlu3or4flh" contenteditable="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13" fill="currentColor"><path d="M6.5 0C2.91406 0 0 2.91406 0 6.5V7C0 8.09766 0.902344 9 2 9H2.5C3.33594 9 4 9.66406 4 10.5V11C4 12.0977 4.90234 13 6 13H6.5C10.0859 13 13 10.0859 13 6.5C13 2.91406 10.0859 0 6.5 0ZM6.5 1C9.54297 1 12 3.45703 12 6.5C12 9.54297 9.54297 12 6.5 12H6C5.44141 12 5 11.5586 5 11V10.5C5 9.125 3.875 8 2.5 8H2C1.44141 8 1 7.55859 1 7V6.5C1 3.45703 3.45703 1 6.5 1ZM6 2C5.44922 2 5 2.44922 5 3C5 3.55078 5.44922 4 6 4C6.55078 4 7 3.55078 7 3C7 2.44922 6.55078 2 6 2ZM9 3C8.44922 3 8 3.44922 8 4C8 4.55078 8.44922 5 9 5C9.55078 5 10 4.55078 10 4C10 3.44922 9.55078 3 9 3ZM3 4C2.44922 4 2 4.44922 2 5C2 5.55078 2.44922 6 3 6C3.55078 6 4 5.55078 4 5C4 4.44922 3.55078 4 3 4ZM10 6C9.44922 6 9 6.44922 9 7C9 7.55078 9.44922 8 10 8C10.5508 8 11 7.55078 11 7C11 6.44922 10.5508 6 10 6ZM8 9C7.44922 9 7 9.44922 7 10C7 10.5508 7.44922 11 8 11C8.55078 11 9 10.5508 9 10C9 9.44922 8.55078 9 8 9Z" fill="currentColor"></path></svg>
<span>This is some text</span>
</div>
<div class="text hover:text-left" id="text_swlu3or4flh" contenteditable="true">This is some text</div>
或添加CSS类:
.text:hover {
text-align: left;
}
要在悬停时在 div 的左侧显示 SVG,您可以使用 CSS 定位 SVG 并使用 :hover 伪类显示/隐藏它。
这是一个示例 HTML 代码:
.container {
display: flex;
align-items: center;
position: relative;
padding-left: 25px;
/* Add padding to the left to make space for the icon */
}
.icon {
position: absolute;
max-width: 25px;
left: 0;
visibility: hidden;
/* Hide the icon by default */
}
.container:hover .icon {
visibility: visible;
/* Show the icon on hover */
}
.content {
padding: 10px;
}
<div class="container">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0zm0 22.955c-5.846 0-10.573-4.728-10.573-10.573S6.154 1.81 12 1.81s10.573 4.728 10.573 10.573-4.727 10.572-10.573 10.572zm1.79-14.767l-1.79 8.9-2.726-2.174a.75.75 0 0 0-.94.115l-2.43 2.813a.75.75 0 0 0 1.155.959l2.12-2.455 2.54 2.033a.75.75 0 0 0 .94-.116l3.464-4.026a.75.75 0 0 0-1.156-.958z"
/>
</svg>
<div class="content">
<p>This is some content.</p>
</div>
</div>