How to set hover to an element that contains an icon-CodePudding

The a tag that contains a search icon in my navbar doesn't show hover styles properly. when I hover over it, it only changes the background color of the icon, not the a tag. the solutions to the other questions can't solve my problem.

<a href="#" >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      
    >
      <rect  fill="white" fill-opacity="0" />
      <path
        fill-rule="evenodd"
        d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
        clip-rule="evenodd"
      />
    </svg>
  </a>


.search {
  left: 96%;
}
.search:hover rect {
  fill: #f44336;
  fill-opacity: 1;
}

demo: https://fudev2009.github.io/name/

CodePudding user response：

You can add rect to fill svg with a background color

<rect width="100%" height="100%" fill="white" fill-opacity="0"/>

And then use .search:hover rect to modify rect styles on hovering

.search:hover rect {
   fill: #f44336;
   fill-opacity: 1;
}

.search {
  left: 96%;
}

.search:hover {
  color: white;
}

.search:hover rect {
  fill: #f44336;
  fill-opacity: 1;
}

<a href="#" >
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" >
          <rect width="100%" height="100%" fill="white" fill-opacity="0"/>
          <path
            fill-rule="evenodd"
            d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z"
            clip-rule="evenodd"
          />
  </svg>
</a>