Question 44921 in Html Question posted in
Some basic documentation can be found here.

Show SVG on left side of div on Hover? – Html

How to "Show SVG on left side of div on Hover" using css

something like this 👇👇
Image To see

I did

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

3

Answers


  1. 0

    This could be one solution:

    #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>
    Login or Signup to reply.
  2. 0 
    <div class="text hover:text-left" id="text_swlu3or4flh" contenteditable="true">This is some text</div>

    or add css class :

    .text:hover {
    text-align: left;

}
    Login or Signup to reply.
  3. 0

    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:

    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search