I am attempting to create a hover effect where one div floats next to another. The layout of the divs is like a grid, placed side by side. Check out my code on this fiddle.
Using plain JavaScript, I want to display a second div (div2) floating next to div1 when hovering over it.
Example:
<div class="div1" onmouseover=getDetails()>
</div>
<div class="div2">
</div>
function getDetails() {
let html ="";
return fetch('https://www.google.com')
.then((response)=> {
response.json().then((data) => {
html += `
<div>Hello world</div>
`;
document.getElementsByClassName("div2")[index].innerHTML = html;
document.getElementsByClassName("div2")[index].style.display = "block";
});
});
}
However, I noticed that setting display: block on div2 triggers multiple server requests and causes flickering on hover. This seems to be due to repeated calls to the server. I'm unsure if this issue stems from CSS or JavaScript.
Any suggestions on how to address this would be greatly appreciated! Thank you.