How to hide an element when I hover on an element

Question

I want to hide the icon when I hover on the h2, but my code doesn't work. What is wrong with my code?

I use Bootstrap and SCSS, but I don't think that causes my problem.

This is my HTML code:

<div class="home__container ">
    <div class="home__container__icon" id="icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="90" fill="currentColor"
            class="bi bi-check-square text-success " viewBox="0 0 16 16">
            <path
                d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
            <path
                d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z" />
        </svg>
    </div>
    <h2 class="home__container__head">
        the Straight Path

    </h2>

</div>

SCSS code is:

.home__container__head {
  background-image: linear-gradient(#7ed56f, #28b485);
  -webkit-background-clip: text !important;
  background-clip: text;
  color: transparent !important;
  font-size: 5rem;
  transform: scale(0.9);
  display: inline-block;
  transition: all 0.3s;
  &:hover {
    box-shadow: 2px 2px 3px #28b485;
    transform: scale(1.2);
    outline: 5px solid #28b485;
    & #icon {
      margin-top: -25px;
      display: none;
    }
  }
}

score 0 · Accepted Answer · answered May 21 '21 at 09:55

CSS doesn't have a facility for you to 'back up and then down'.

A couple of things you can do with just HTML/CSS.

You could alter the CSS to sense hover on the parent:

  .home__container__head {
    background-image: linear-gradient(#7ed56f, #28b485);
    -webkit-background-clip: text !important;
    background-clip: text;
    color: transparent !important;
    font-size: 5rem;
    transform: scale(0.9);
    display: inline-block;
    transition: all 0.3s;
  }
  
  .home__container:hover .home__container__head {
    box-shadow: 2px 2px 3px #28b485;
    transform: scale(1.2);
    outline: 5px solid #28b485;
  }
  
  .home__container:hover #icon {
    margin-top: -25px;
    display: none;
  }

<div class="home__container ">
  <div class="home__container__icon" id="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="500" height="90" fill="currentColor" class="bi bi-check-square text-success " viewBox="0 0 16 16">
                    <path
                        d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                    <path
                        d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z" />
                </svg>
  </div>
  <h2 class="home__container__head">
    the Straight Path

  </h2>

</div>

Or change the design and put the icon after The Straight Path - that way you can select the icon as a sibling directly following The Straight Path.

Or put the icon not in a separate div but in a pseudo before element. Then you can make it disappear on hover of the text div.

If neither of these is possible then you will have to use some Javascript to sense when The Straight Path is being hovered over and alter both it and the icon's styles (or add/remove classes).

How to hide an element when I hover on an element

1 Answers1