As I work on adding a mouseover event to my HTML code, I encounter a situation where the myDiv element overlaps with the <img>. When I hover over the <img>, the mouseover event works as expected and detects that it's hovering over the image. However, when I move the mouse to hover over the myDiv without leaving the <img>, the detection remains on the <img> rather than switching to the myDiv. How can I make sure the mouseover event also detects the myDiv without moving away from the <img>?
Here is the relevant part of my code
HTML code
<style>
.myDiv{
position:absolute;
}
.hoverEffect{
border: 2px solid #0044ff;
opacity: 0.5;
}
</style>
<div class="myDiv">
<h1>Heading</h1>
</div>
<img src="myimage.jpg">
JQuery Code
$('body').mouseover(function(e) {
//e.target For Detecting div or image
$(e.target).addClass('hoverEffect');
});
$('body').mouseout(function(e) {
$(e.target).removeClass('hoverEffect');
}
The issue becomes apparent when observing the GIF image in which the content "WELCOME TO OUR APP" within another div is not detected after hovering over the image. In the JQuery code provided, the addition of the "hoverEffect" class to the hovered element seems to be causing the problem, particularly due to the use of opacity. Removing opacity resolves the issue, but how can I achieve the desired behavior without removing opacity from the class?
Working jsfiddle link (without using opacity)
Not Working jsfiddle link (with opacity)
My main question revolves around why the functionality breaks when opacity is added to the class. Is there a way to maintain opacity while still ensuring proper detection of the myDiv element?