CODEWITHSUNDEEP
htmlcss
user19514686
user19514686

Reputation:

HTML & CSS, add hover effect over text and icon at the same time

I want to make the icon to change its color too whenever I hover over any area. Now the icon changes color only when I hover over the icon. Here is my code: 

<style>.logo {
  width: 200px;
  background-color: red;
}

.logo:hover {
  color: red;
  background: black;
}

.logo i:hover {
  color: green;
}

</style>
<html>

<head>
  <title>check</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

</head>

<body>
  <div class="sidebar">
    <div class="logo">
      <i class="bi bi-hurricane icon-4x"></i>
      <span class="admin">ADMIN</span>
    </div>

  </div>
</body>

</html>

Upvotes: 1

Views: 125

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 45883

Use this selector .logo:hover i instead of .logo i:hover if you want the icon to change when you hover over the logo. Like so:

<style>
  .logo {
    width: 200px;
    background-color: red;
  }

  .logo:hover {
    color: red;
    background: black;
  }

  .logo:hover i{
    color: green;
  }
</style>
<html>
<head>
  <title>check</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
  <div class="sidebar">
    <div class="logo">
      <i class="bi bi-hurricane icon-4x"></i>
      <span class="admin">ADMIN</span>
    </div>
  </div>
</body>
</html>

Upvotes: 2

Related Questions