A button's hover effect is affecting another button's hover effect

Question

I have a weird thing happening here. When I hover over a button, it disappears and another button right above it takes its effect meaning its color changes when actually the button that is hovered over should change its color.

Here's what creates the buttons:

createDiv () {

        //  div
       const div = document.createElement('div')
       document.body.appendChild(div)
       div.className = "account-div";
       div.id = "account-div"

       
        // input for Name
       const input = document.createElement('input')
       input.className = "account-input"
       div.appendChild(input)
       input.value = this.state.displayName;
       input.addEventListener('change', this.changeName)
        // label
       const label = document.createElement('label')
       label.className = 'account-label'
       input.insertAdjacentElement('beforebegin', label)
       label.textContent = "Name:";
        // update button
        const button = document.createElement('button');
        button.className = 'account-button';
        input.insertAdjacentElement('afterend', button)
        button.textContent = "Update"
        button.addEventListener('click', this.updateName)


        // input for Email
       const input2 = document.createElement('input')
       input2.className = "account-input2"
       div.appendChild(input2)
       input2.value = this.state.email;
       input2.addEventListener('change', this.changeEmail)
        // label
       const label2 = document.createElement('label')
       label2.className = 'account-label2'
       input2.insertAdjacentElement('beforebegin', label2)
       label2.textContent = "Email:";
        // update button
        const update = document.createElement('button');
        update.className = 'update-button';
        update.id = "update-button-id"
        input2.insertAdjacentElement('afterend', update)
        update.textContent = "Update"
        update.addEventListener('click', this.updateEmail)
     }

This is the CSS:

.account-input {
    
    position: relative;
    left: 40px;
    top: -10px;
    margin: 5px 5px;
    margin-bottom: 10px;
    height: 30px; 
    font-family: inherit;
    width: 70%;
    border: 0;
    border-bottom: 2px solid black;
    outline: 0;
    font-size: 1.3rem;
    color: white;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    border-width: 3px;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1;
  }
  
  .account-input::placeholder {
    color: lightgray;
  }
  
  .account-input:focus {
    border-width: 3px;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1;
  }

  .account-label {
      color: white;
      position: absolute;
      top: 30px;
      left: 40px;
  }

  .account-button {
      position: absolute;
      left: 150px;
      top: 110px;

      background: none!important;
      border: none;
      padding: 0!important;
      color: lightblue;
      
  }

  .account-button:hover {
    position: absolute;
    left: 150px;
    top: 110px;

    background: none;
    border: none;
    padding: 0;
    color: lightgrey;
    
}

.account-button:active {
    position: absolute;
    left: 150px;
    top: 110px;

    height: 10px;
    width: 10px;

    background: none;
    border: none;
    padding: 0;
    color: burlywood;

    
    
}




.account-input2 {
    
    position: relative;
    left: 40px;
    top: 30px;
    margin: 5px 5px;
    margin-bottom: 10px;
    height: 30px; 
    font-family: inherit;
    width: 70%;
    border: 0;
    border-bottom: 2px solid black;
    outline: 0;
    font-size: 1.1rem;
    color: white;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
    border-width: 3px;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1;
  }
  
  .account-input2::placeholder {
    color: lightgray;
  }
  
  .account-input2:focus {
    border-width: 3px;
    border-image: linear-gradient(to right, #11998e, #38ef7d);
    border-image-slice: 1;
  }

  .account-label2 {
      color: white;
      position: absolute;
      top: 140px;
      left: 40px;
  }

  #update-button-id {
      position: absolute;
      left: 150px;
      top: 210px;

      background: none;
      border: none;
      padding: 0;
      color: lightblue;
      
  }

  #update-button-id:hover {
    position: absolute;
    left: 150px;
    top: 110px;

    background: none;
    border: none;
    padding: 0;
    color: green;
    
}

#update-button-id:active {
    position: absolute;
    left: 150px;
    top: 110px;

    height: 10px;
    width: 10px;

    background: none;
    border: none;
    padding: 0;
    color: green;
      
    
}

This is how it looks. The code runs when Account is pressed:

This is what happens when the second button (update) is hovered over. Basically, it disappears and the first update button takes its CSS:

I tried to target the buttons with className and IDs in CSS but both yield the same result.

Any idea why?

Thanks

Answer 1

The hover state for the second button is assigned the same absolute X and Y positioning values as the first button so it's appearing on top of the first button during its hover state. There's no need to restate an element's X and Y positioning on hover or active pseudo classes. The element will retain its already assigned positioning.