Question 363852 in Html Question posted in
Some basic documentation can be found here.

Html – Unable to click and hover on buttons through Overlay

The overlay is used to move the text upwards and reveal buttons but I cannot put hover or click on those buttons because as soon as I go over them the overlay and text comes down making it unable for me to access.

I tried attaching event listeners for mouse enter and leave and maintain a state for it, applying CSS, using pointer-events.
I expect that the top element moves above when I hover over the overlay revealing the buttons and then hover or click on buttons to do something. The thing is that it should remain as if it is hovered even if I am hovering on buttons which also have :hover on them and the overlay :hover should only disable when I am outside of entire overlay.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container {
  height: 50%;
  width: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
  position: absolute;
  top: 35%;
  left: 35%;
  background: blue;
  opacity: 0.3;
  height: 40%;
  width: 30%;
  z-index: 1;
}

.element1 {
  color: white;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 1s;
}

.buttonsContainer {
  position: absolute;
  top: 53%;
  left: 45%;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  opacity: 0;
  transition: opacity 1s;
}

.overlay:hover~.element1 {
  transform: translateY(-100px);
}

.overlay:hover~.buttonsContainer {
  opacity: 1;
  z-index: 3;
}

.btn:hover {
  color: red;
  cursor: pointer;
}
<div class="container">
  <div class="overlay"></div>
  
  <div class="element1">Some texts</div>
  
  <div class="buttonsContainer">
    <button class="btn">b</button>
    <button class="btn">b</button>
    <button class="btn">b</button>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I have found and alternate approach to implement this by modifying a bit of HTML and CSS. Though the CSS is a bit incomplete but the gaol is achieved.

    body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container{
  height: 50%;
  width: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.overlay{
  position: absolute;
  top: 35%;
  left: 35%;
  background: blue;
  opacity: 0.3;
  height: 40%;
  width: 30%;
  z-index: 1;
  text-align: center;
}

.element1{
  color: white;
  font-size: 3rem;
  font-weight: bold;
  transition: transform 1s;
}

.buttonsContainer{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transition: opacity 1s;
}

.overlay:hover ~ .element1{
  transform: translateY(-100px);
}
.overlay:hover > .buttonsContainer{
  opacity: 1;
  z-index: 3;
}
.btn:hover{
  color: red;
  cursor: pointer;
}
    <div class="container">
  <div class="overlay">
    <div class="buttonsContainer">
      <button class="btn">b</button>
      <button class="btn">b</button>
      <button class="btn">b</button>
    </div>
  </div>
  <div class="element1">
    Some texts
  </div>
</div>

    You can edit the . buttonsContainer CSS according to your requirements.
    The approach is to move .buttonsContainer inside of the overlay div so that click action is enabled and it still continues to do the overlay effect.

    Login or Signup to reply.
  2. 0

    The main problem is that your hover should be on a stationary element, in this case the container. Then, you can do much of this with pseudo-elements rather than extra markup.

    I’m not entirely clear on your goal, but this should give you some direction.

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

.container {
  height: 50%;
  width: 50%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  opacity: 0.3;
  height: 100%;
  width: 100%;
  z-index: 1;
  transition: transform 1s;
}

.container::after {
  content: 'Some Text';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  font-weight: bold;
  z-index: 2;
  transition: transform 1s;
}

.container:hover::before {
  transform: translateY(-100%);
}

.container:hover::after {
  transform: translate(-50%, -200%);
}

.btn:hover {
  color: red;
  cursor: pointer;
}
    <div class="container">
  <button class="btn">b</button>
  <button class="btn">b</button>
  <button class="btn">b</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search