var colorsBig = document.querySelector('.big-color');
var colorsElements = document.querySelectorAll('ul li');
for(var colorElement of colorsElements) {
colorElement.onmouseenter = function(event) {
colorsBig.classList.remove('hidden');
var targetX = event.target;
var location = targetX.getBoundingClientRect().x;
colorsBig.style.left = location + 'px'
}
colorElement.onmouseleave = function() {
colorsBig.classList.add('hidden');
}
}document.querySelector('.buy').addEventListener('click', (e)=>{
if(e.target){
document.querySelector('.login-content-signin').style.opacity="0"
document.querySelector('.login-content-signin').style.zIndex="-1"
document.querySelector('.login-content-signup').style.opacity="1"
document.querySelector('.login-content-signup').style.zIndex="1"
}
})
document.querySelector('.hi').addEventListener('click', (e)=>{
if(e.target){
document.querySelector('.login-content-signin').style.opacity="1"
document.querySelector('.login-content-signin').style.zIndex="1"
document.querySelector('.login-content-signup').style.opacity="0"
document.querySelector('.login-content-signup').style.zIndex="-1"
}
})
<button ng-click="showSignIn=false" class="hi">Login</button>
<button ng-click="showSignIn=true" class="buy">Sign Up</button>