Как изменить при наведении текст формы?

var input = document.querySelector('input'); 
var placeholder = input.placeholder; 
 
input.addEventListener('mouseover', () => { 
  input.placeholder = 'новый текст' 
}) 
 
input.addEventListener('mouseout', () => { 
  input.placeholder = placeholder; 
})

input { 
  padding: 15px; 
  border-radius: 20px; 
  font-size: 20px; 
} 
 
input:hover::-webkit-input-placeholder { 
  border-bottom: 2px solid blue; 
  font-weight: bold; 
} 
 
input:hover::-moz-placeholder { 
  border-bottom: 2px solid blue; 
  font-weight: bold; 
} 
 
input:hover:-moz-placeholder { 
  border-bottom: 2px solid blue; 
  font-weight: bold; 
}

<input type='text' placeholder='text'>