Icons are not visible after hovering a button-CodePudding

I'm new at CSS and front-end programming. I want to display two icons next to a button after the button is hovered. But in my code, the icons are not displaying after hover effect. Can you help please ?

#submit-btn {
  padding: 15px 50px;
  background-color: whitesmoke;
  color: #333;
  border: none;
  font-weight: 700;
  transition: background-color .3s;
}

#submit-btn:hover {
  background-color: #870F02;
  color: whitesmoke;
  box-shadow: 10px 10px 8px #62F0AA;
}

.fa-hand-point-right,
.fa-hand-point-left {
  display: none;
}

#submit-btn:hover .fa-hand-point-left,
#submit-btn:hover .fa-hand-point-right {
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div >
  <i ></i>
  <button id="submit-btn"  type="submit">PROJEYİ GÖNDER</button>
  <i ></i>
</div>

CodePudding user response：

You've implemented descendant selectors, but the icons are siblings of the button. Since there are no previous sibling selectors in CSS, you have a few options:

Use a wrapping element as a hover target.
Place the icons inside the button element.
Use JavaScript to enact the hover effect on specific elements.

Here I demonstrate the first option. I'm loading Bootstrap to leverage the d-inline-block class, which makes the div shrink to the size of the elements inside. I've also used opacity instead of display, as display: none removes the elements from the document flow. This can cause ugly shifting of things on hover. Since your button is centered it doesn't, but it easily could if your alignment changed. Also, you can animate opacity to match your button styles.

The drawback to this approach is that the effect occurs when hovering over the hidden icons also. The same would be true for option 2.

#submit-btn {
  padding: 15px 50px;
  background-color: whitesmoke;
  color: #333;
  border: none;
  font-weight: 700;
  transition: background-color .3s;
}

#submit-btn:hover {
  background-color: #870F02;
  color: whitesmoke;
  box-shadow: 10px 10px 8px #62F0AA;
}

.fa-hand-point-right,
.fa-hand-point-left {
  opacity: 0;
  transition: opacity 0.3s;
}

.hover-target:hover .fa-hand-point-left,
.hover-target:hover .fa-hand-point-right {
  opacity: 1;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <div >
    <i ></i>
    <button id="submit-btn"  type="submit">PROJEYİ GÖNDER</button>
    <i ></i>
  </div>
</div>