So im designing an element/code in js and html that makes it so when you hover over a class called "img_container_invis" it makes a comment icon appear, but even though everything should be set correctly, the comment icon activates when you hover over a class called "picture_batch_container" which holds img_container_invis. I've tried moving around divs and imgs, re-assigning ids and data-comments, nothing seems to work.

Restating, the issue is when the mouse enters Picture_batch_container the comment icon appears, instead of the comment icon when the mouse enters img_container_invis.

heres a snippet.

const imgCommentIcon = document.getElementById('img_comment_icon'); document.querySelectorAll('.picture_batch_container_img').forEach(function(img) { const container = img.parentElement; container.addEventListener('mouseenter', function() { imgCommentIcon.src = img.dataset.comment; imgCommentIcon.style.display = 'block'; }); container.addEventListener('mouseleave', function() { imgCommentIcon.style.display = 'none'; }); }); .picture_batch_container { display: grid; height: 600px; width: 600px; border: 5px solid red; background-color: grey; margin: auto; } .picture_batch_container_img { width: 200px; height: 200px; object-fit: contain; } .img_container_invis { position: relative; display: inline-block; } #img_comment_icon { width: 30px; height: 30px; font-size: 10px; font-family: consolas; position: absolute; display: none; text-shadow: 0px 0px 5px black; object-fit: contain; } <section> <div class="picture_batch_container"> <div class="img_container_invis"> <img src="300by300.webp" class="picture_batch_container_img" data-comment="comment.png"> <img id="img_comment_icon" src="comment.png"> </div> </div> </section>

pilchard's user avatar

pilchard

13.1k5 gold badges14 silver badges28 bronze badges

Best Programmer's user avatar

4

the parent element uses grid layout, which is breaking inline-block.

img_container_invis is not shrinking to contain its contents, its expanding to fill its parent container.

Not sure this is the best solution, but you can apply height: fit-content; and width: fit-content; to img_container_invis.

your problem is css rather than javascript, do you specifically need to use javascript? you could achieve the same result with plain css

NickSlash's user avatar

your div img_container_invis is as big as the picture_batch_container_img that causes that beaviour.

It's a css problem. Set the div 300x300 and fit the image inside it.

LeonardoP's user avatar

New contributor

LeonardoP is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.