change color icon on hover (font awasome)

Viewed 27

i need to change the color icon on hover

color rgb rgba(0,173,239);

<head>
  <!-- <link rel="stylesheet" href="style.css"> -->
  <script src="https://kit.fontawesome.com/0e05c28199.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="video_player">
      <video class="video" poster="nudzovy-let.jpg">
          <source src="Nudzovy-let_TVRip_SK.mp4"  type="video/mp4">
      </video>

      <div class="controls">
        <button type="button" class="play_and_pause"><i class="fa-sharp fa-solid fa-play fa-2x"></i></button>

        <div class="player_2">
          <div class="progres_bar">
            <div class="bar"></div>
          </div>

          <div class="volume" style="width: 24px;height: 12px;margin-left: 11px;height: 14px;display: flex;">
            <div class="volume-1">*</div>
            <div class="volume-2">*</div>
            <div class="volume-3">*</div>
            <div class="volume-4">*</div>
            <div class="volume-3">*</div>
          </div>

          <div class="subtitle"><i class="fa-solid fa-closed-captioning"></i></div>
          <div class="setting"><i class="fa-sharp fa-solid fa-gear"></i></div>
          <div class="fullscreen"><i class="fa-solid fa-expand"></i></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

1 Answers

i:hover, .subtitle:hover, .setting:hover,.fullscreen:hover {
 color: red;
}
<head>
  <!-- <link rel="stylesheet" href="style.css"> -->
  <script src="https://kit.fontawesome.com/0e05c28199.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="video_player">
      <video class="video" poster="nudzovy-let.jpg">
          <source src="Nudzovy-let_TVRip_SK.mp4"  type="video/mp4">
      </video>

      <div class="controls">
        <button type="button" class="play_and_pause"><i class="fa-sharp fa-solid fa-play fa-2x"></i></button>

        <div class="player_2">
          <div class="progres_bar">
            <div class="bar"></div>
          </div>

          <div class="volume" style="width: 24px;height: 12px;margin-left: 11px;height: 14px;display: flex;">
            <div class="volume-1">*</div>
            <div class="volume-2">*</div>
            <div class="volume-3">*</div>
            <div class="volume-4">*</div>
            <div class="volume-3">*</div>
          </div>

          <div class="subtitle"><i class="fa-solid fa-closed-captioning"></i></div>
          <div class="setting"><i class="fa-sharp fa-solid fa-gear"></i></div>
          <div class="fullscreen"><i class="fa-solid fa-expand"></i></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Related