JSFiddle - React, Tailwind, and code Playground

HTML

<select name="animaux" multiple>
<option selected>cliquez</option>
    <optgroup label="Animaux à 4-jambes">
      <option value="Chien">Chien</option>
      <option value="chat">Chat</option>
      <option value="hamster">Hamster</option>
    </optgroup>
    <optgroup label="Animaux volants">
      <option value="perroquet">Perroquet</option>
      <option value="macaw">Macaw</option>
      <option value="albatros">Albatros</option>
    </optgroup>
  </select>

CSS

select:not(:focus) optgroup{display:none;}
select optgroup > option {display:none;}
select optgroup:hover > option {display:block;}