css 悬停时在div左侧显示SVG?

mtb9vblg  于 2023-02-26  发布在  其他
关注(0)|答案(3)|浏览(125)

如何使用css "悬停时在div左侧显示SVG"
像这样东西👇👇
Image To see
是的

<div class="text" id="text_swlu3or4flh" contenteditable="true">This is some text</div>
s4chpxco

s4chpxco1#

这可能是一个解决办法:

#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>
ffx8fchx

ffx8fchx2#

<div class="text hover:text-left" id="text_swlu3or4flh" contenteditable="true">This is some text</div>

或添加css类:

.text:hover {
    text-align: left;

}
6ju8rftf

6ju8rftf3#

To show an SVG on the left side of a div on hover, you can use CSS to position the SVG and show/hide it with the :hover pseudo-class.

Here's an example HTML code:

<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>
<style>
  .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;
  }
</style>

相关问题