I am new to web dev and am trying to change DOM when I hover over a parallax scroll, but I want it to be triggered for specific elements in the parallax, whereas the function is triggered immediately after load.
Here is what my HTML looks like:
<h1> Test </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget pharetra orci. Duis venenatis condimentum nisl sed viverra. Cras eu ex leo. Fusce non sagittis nibh. Nulla facilisi. Cras malesuada lacinia ex non dapibus. Nulla risus tortor, blandit ut scelerisque ut, scelerisque ac ligula.
Nunc imperdiet, justo a condimentum lacinia, nibh sem lacinia arcu, sed sagittis justo eros eget diam. In neque nisi, dignissim vel sapien aliquet, tincidunt iaculis mauris. Morbi in urna augue. Duis augue arcu, pharetra vel velit at, iaculis tempor magna. Integer tincidunt odio ac viverra feugiat. Sed eu egestas lorem. Donec interdum non nisi quis ultricies. In gravida sit amet sapien non malesuada. Praesent ullamcorper mi id turpis suscipit ultricies. Duis viverra id justo a dignissim.
Etiam at lectus non odio elementum consectetur. Aenean vitae condimentum libero, et pellentesque nulla. In maximus felis erat, vulputate consectetur arcu pretium vehicula. Maecenas volutpat finibus lobortis. Pellentesque at odio mollis, lobortis quam ac, semper sapien. Nunc venenatis ante diam, quis tristique turpis commodo quis. Morbi gravida ullamcorper ligula, ut aliquet nunc euismod a. Nulla tempor interdum nunc, sit amet bibendum leo malesuada nec. Pellentesque enim urna, maximus eget tempus eu, mattis quis ante. Nullam ac arcu nec elit eleifend congue ut ut ligula.
Proin in ligula elit. Praesent pharetra mi id dui auctor, nec rhoncus nunc vulputate. Vestibulum vel nulla id eros blandit placerat in at purus. Integer sollicitudin congue feugiat. Etiam molestie venenatis felis, id posuere nibh ultrices a. Cras semper arcu vitae justo dictum dapibus. Donec pulvinar, nibh et laoreet sodales, massa nunc rhoncus tellus, lobortis ullamcorper velit ligula at tellus. Vestibulum commodo tellus leo, in hendrerit magna sodales eget. Sed nisl purus, scelerisque id ipsum id, placerat lacinia turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit faucibus mauris eu viverra. Maecenas magna nunc, posuere at orci tincidunt, bibendum euismod turpis. Ut aliquet metus quis felis pharetra, at dapibus neque pharetra. Vestibulum vel enim tellus.
Ut sollicitudin leo in velit volutpat porttitor. Sed suscipit sem lorem, eget finibus lectus dapibus a. Vestibulum ultricies dapibus leo, et congue tellus condimentum eget. Donec rhoncus, velit vel aliquam consectetur, lectus nisl posuere dui, a eleifend ex urna id justo. Praesent vitae libero at ex facilisis rhoncus vitae mattis felis. Quisque sed mi lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sit amet iaculis nulla. Vestibulum semper justo quis orci dapibus vehicula ac quis sem. Integer facilisis vitae dolor eu accumsan. Proin a velit sed ex sollicitudin iaculis. Aliquam scelerisque ipsum sit amet euismod suscipit.
</p>
<div class="parallax">
<h1>This is a test heading 1</h1>
<h1>This is a test heading 2</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget pharetra orci. Duis venenatis condimentum nisl sed viverra. Cras eu ex leo. Fusce non sagittis nibh. Nulla facilisi. Cras malesuada lacinia ex non dapibus. Nulla risus tortor, blandit ut scelerisque ut, scelerisque ac ligula.
Nunc imperdiet, justo a condimentum lacinia, nibh sem lacinia arcu, sed sagittis justo eros eget diam. In neque nisi, dignissim vel sapien aliquet, tincidunt iaculis mauris. Morbi in urna augue. Duis augue arcu, pharetra vel velit at, iaculis tempor magna. Integer tincidunt odio ac viverra feugiat. Sed eu egestas lorem. Donec interdum non nisi quis ultricies. In gravida sit amet sapien non malesuada. Praesent ullamcorper mi id turpis suscipit ultricies. Duis viverra id justo a dignissim.
Etiam at lectus non odio elementum consectetur. Aenean vitae condimentum libero, et pellentesque nulla. In maximus felis erat, vulputate consectetur arcu pretium vehicula. Maecenas volutpat finibus lobortis. Pellentesque at odio mollis, lobortis quam ac, semper sapien. Nunc venenatis ante diam, quis tristique turpis commodo quis. Morbi gravida ullamcorper ligula, ut aliquet nunc euismod a. Nulla tempor interdum nunc, sit amet bibendum leo malesuada nec. Pellentesque enim urna, maximus eget tempus eu, mattis quis ante. Nullam ac arcu nec elit eleifend congue ut ut ligula.
Proin in ligula elit. Praesent pharetra mi id dui auctor, nec rhoncus nunc vulputate. Vestibulum vel nulla id eros blandit placerat in at purus. Integer sollicitudin congue feugiat. Etiam molestie venenatis felis, id posuere nibh ultrices a. Cras semper arcu vitae justo dictum dapibus. Donec pulvinar, nibh et laoreet sodales, massa nunc rhoncus tellus, lobortis ullamcorper velit ligula at tellus. Vestibulum commodo tellus leo, in hendrerit magna sodales eget. Sed nisl purus, scelerisque id ipsum id, placerat lacinia turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit faucibus mauris eu viverra. Maecenas magna nunc, posuere at orci tincidunt, bibendum euismod turpis. Ut aliquet metus quis felis pharetra, at dapibus neque pharetra. Vestibulum vel enim tellus.
Ut sollicitudin leo in velit volutpat porttitor. Sed suscipit sem lorem, eget finibus lectus dapibus a. Vestibulum ultricies dapibus leo, et congue tellus condimentum eget. Donec rhoncus, velit vel aliquam consectetur, lectus nisl posuere dui, a eleifend ex urna id justo. Praesent vitae libero at ex facilisis rhoncus vitae mattis felis. Quisque sed mi lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sit amet iaculis nulla. Vestibulum semper justo quis orci dapibus vehicula ac quis sem. Integer facilisis vitae dolor eu accumsan. Proin a velit sed ex sollicitudin iaculis. Aliquam scelerisque ipsum sit amet euismod suscipit.
</p>
The CSS styles as as follows:
parallax {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80");
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1{
color: white;
}
What I want is to trigger a function on hovering over the area between the two paragraphs. The Resulting view of the above HTML and CSS can be seen here.
My current JS for the trigger is something like this:
const parallax = document.getElementsByClassName("parallax")[0];
parallax.addEventListener("mouseenter",alert("test!"));
The end goal is to insert another element between the two h1 tags, but that I have figured out, just need to set the trigger.
So, I did solve it by changing my approach, instead of trying to create and delete the element on mouseover and mouseout events, I created the element in the original HTML and used the display property to control it's visibility. It will do for now, but I do plan to go down the rabbit hole and see what went wrong with my initial approach.