Eventos de Mouse – Javascript



<section id="container">
    <ul>
        <li id="list-item-one" style="width: 500px;">The mouse must pass over to increase the box width</li>
        <li id="list-item-two" style="background-color: red;">Release the mouse button to change the color</li>
        <li id="list-item-three">The mouse has left the element</li>
        <li id="list-item-four" style="display: block;">Click the mouse to make the fifth box appear</li>
        <li id="list-item-five" style="display: none;">You found me!</li>
        <button id="reset-button">Reset</button>
    </ul>
  </section>


<script>
let itemOne = document.getElementById('list-item-one');
let itemTwo = document.getElementById('list-item-two');
let itemThree = document.getElementById('list-item-three');
let itemFour = document.getElementById('list-item-four');
let itemFive = document.getElementById('list-item-five');
let resetButton = document.getElementById('reset-button');

let reset = function() {
  itemOne.style.width = ''
  itemTwo.style.backgroundColor = ''
  itemThree.innerHTML = 'The mouse must leave the box to change the text'
  itemFive.style.display = "none"
};
resetButton.onclick = reset;





function increaseWidth(){
  itemOne.style.width = '500px';


}



itemOne.addEventListener('mouseover', increaseWidth);

function  changeBackground(){
   itemTwo.style.backgroundColor = 'Red';

}
itemTwo.addEventListener('mouseup', changeBackground);



function changeText(){


   itemThree.innerHTML = 'The mouse has left the element';
}

itemThree.addEventListener('mouseout', changeText);



function showItem(){

    itemFour.style.display = "block";
}

itemFour.addEventListener('mousedown', showItem);




</script>