CODEWITHSUNDEEP
csssasshover
cedric
cedric

Reputation: 169

CSS :hover on button not working within already hovered div

I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.

The issue is the hovering on the button doesn't trigger the hover.

Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.

//HTML
 <div class="container">
  <img src="src">
  <div class="btn_container">
    <div class=" btn">
      <p>Select</p>
    </div>
    <div class="btn">
      <p>Preview</p>
    </div>
  </div>
      
//SCSS
.container {
  position: relative;
  width: 100%;
  img {
    width: 100%;
    height: auto;
  }

  .btn_container {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: var(--dark-purple-trans);
    bottom: 0;
    left: 0;
    align-items: center;
    display: none;
    position: absolute;
  }
  img:hover + .btn_container,
  .btn_container > * {
    display: flex;
    border: none;
    text-align: center;
    justify-content: space-around;
  }

  .btn {
    padding: 6px 12px;
    height: 14px;
    background: var(--yellow-medium);
    border-radius: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--white);
    font-family: roboto;
    &:hover {
      cursor: pointer;
      background: var(--red);
      color: var(--white);
    }
  }
}

Preview, button hovering not working:

enter image description here

If I force the hover on the img using the inspector, the button hovering seems to work:

enter image description here

Upvotes: 1

Views: 1818

Answers (2)

Demartini
Demartini

Reputation: 111

The problem is in classes img:hover + .btn_container and .btn_container > *.

Here is the updated scss:

.container {
  position: relative;
  width: 100%;

  img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
  }

  &:hover .btn_container {
    display: flex;
  }

  .btn_container {
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 40px;
    text-align: center;
    background-color: var(--dark-purple-trans);
    border: none;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 14px;
    padding: 6px 12px;
    color: var(--white);
    font-family: roboto;
    background-color: var(--yellow-medium);
    border-radius: 8px;
    cursor: pointer;

    &:hover {
      color: var(--white);
      background-color: var(--red);
    }
  }
}

You can view it in action here: Codepen

Upvotes: 1

devchin
devchin

Reputation: 23

I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/

  .btn_container {
    width: 500px;
    height: 100px;
    background-color: var(--dark-purple-trans);
    bottom: 0;
    left: 0;
    align-items: center;
    opacity: 0;
    position: absolute;
  }

  img:hover + .btn_container,
  .btn_container:hover,
  .btn_container > * {
    display: flex;
    opacity: 1;
    border: 1px solid blue;
    text-align: center;
    justify-content: space-around;
  }

There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.

Upvotes: 1

Related Questions