How can I fix hover not working at some places?-CodePudding

I have taken the icons from font awesome website. But the hover is not functional here only.
I think <i> is causing some problem from font awesome website.
Can anyone tell why hover is not working at this place?
It is working well in other parts of the code.

Can anyone recreate this in his platform and tell which solution actually works.

.cont4 .icons li a:hover {
  color: black;
  /* transform: translateY(-20px); */
}


/* no kind of hover is working*/

.cont4 {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, rgb(243, 53, 205), rgb(255, 255, 255));
}

.cont4 .color {
  position: absolute;
  filter: blur(100px);
}

.cont4 .color:nth-child(1) {
  background-color: rgb(241, 64, 233);
  width: 2000px;
  height: 600px;
  top: -200px;
}

.cont4 .color:nth-child(2) {
  background-color: aqua;
  width: 800px;
  height: 500px;
  bottom: -150px;
  left: 300px;
}

.cont4 .color:nth-child(3) {
  background-color: rgb(223, 223, 104);
  width: 800px;
  height: 400px;
  bottom: 0px;
  right: 300px;
}

.cont4::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0%;
  z-index: 1;
  backdrop-filter: blur(5px);
  border-top: 1px solid white;
}

.icons {
  position: relative;
  display: flex;
  z-index: 45;
}

.icons li {
  position: relative;
  list-style: none;
  margin: 10px;
}

.icons li a {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  display: flex;
  border: 1px solid white;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 5px 4px rgb(43, 38, 38);
  backdrop-filter: blur(2px);
  transition: 0.5s;
  color: aliceblue;
  font-size: 2em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-zIaWifL2YFF1qaDiAo0JFgsmasocJ/rqu7LKYH8CoBEXqGbb9eO Xi3s6fQhgFWM" crossorigin="anonymous">
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <ul >
    <li><a href="#"><i ></i></a></li>
    <li><a href="#"><i  aria-hidden="true"></i></a></li>
    <li><a href="#"><i  aria-hidden="true"></i></a></li>
    <li><a href="#"><i  aria-hidden="true"></i></a></li>
  </ul>
</div>
<script src="https://kit.fontawesome.com/e44c8c4915.js" crossorigin="anonymous"></script>

CodePudding user response：

Just remove ' z-index:-1; ' from .cont4 class and the hover effect will be applied

CodePudding user response：

Add the i to the selector and change the z-index to not -1; here I gave it 999

.cont4 .icons li a i:hover {
  color: black;
  /* transform: translateY(-20px); */
}

.cont4 {
  position: relative;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, rgb(243, 53, 205), rgb(255, 255, 255));
}

.cont4 .color {
  position: absolute;
  filter: blur(100px);
}

.cont4 .color:nth-child(1) {
  background-color: rgb(241, 64, 233);
  width: 2000px;
  height: 600px;
  top: -200px;
}

.cont4 .color:nth-child(2) {
  background-color: aqua;
  width: 800px;
  height: 500px;
  bottom: -150px;
  left: 300px;
}

.cont4 .color:nth-child(3) {
  background-color: rgb(223, 223, 104);
  width: 800px;
  height: 400px;
  bottom: 0px;
  right: 300px;
}

.cont4::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 0%;
  z-index: 1;
  backdrop-filter: blur(5px);
  border-top: 1px solid white;
}

.icons {
  position: relative;
  display: flex;
  z-index: 45;
}

.icons li {
  position: relative;
  list-style: none;
  margin: 10px;
}

.icons li a {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
  display: flex;
  border: 1px solid white;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 5px 4px rgb(43, 38, 38);
  backdrop-filter: blur(2px);
  transition: 0.5s;
  color: aliceblue;
  font-size: 2em;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-zIaWifL2YFF1qaDiAo0JFgsmasocJ/rqu7LKYH8CoBEXqGbb9eO Xi3s6fQhgFWM" crossorigin="anonymous">
<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <ul >
    <li><a href="#"><i ></i></a></li>
    <li><a href="#"><i  aria-hidden="true"></i></a></li>
    <li><a href="#"><i  aria-hidden="true"></i></a></li>
    <li><a href="#"><i  aria-hidden="true"></i></a></li>
  </ul>
</div>
<script src="https://kit.fontawesome.com/e44c8c4915.js" crossorigin="anonymous"></script>