Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

Question

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

After writing the following jQuery script, I encountered an issue.

<script type="text/javascript">
          $(document).ready(function(){
           $('#Oval-1').on('mouseover', function(e) {
                $("#Oval-1").fadeOut();
            });
                $('#Oval-1').on('mouseout', function(e) {
                         $("#Oval-1").fadeIn();
                 });
          });
        </script>

The ID Oval-1 corresponds to an SVG image on my webpage. The intention was for the image to fade out upon mouseover and fade back in upon mouseout. However, the current implementation is causing the image to blink once. What am I missing here?

Displayed below is the div containing the SVG:

<div class="wrapper">
        <svg width="1024px" height="279px" viewBox="0 0 1024 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch -->
<title>map png</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="geschichte" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Desktop-Landscape" transform="translate(-145.000000, -332.000000)">
        <g id="map" transform="translate(107.000000, 246.000000)">
            <g id="mapback" transform="translate(38.000000, 86.000000)">
                <g id="map-png">

// Additional paths found within the SVG have been omitted

                                            <ellipse id="Oval-1" fill="#0B619B" opacity="0.141849347" cx="929.5" cy="94.5" rx="94.5" ry="94.5"></ellipse>

                </g>
            </g>
        </g>
    </g>
</g>

I came across this solution, but my concern lies specifically with jQuery rather than vanilla JavaScript.

javascript jquery html css svg

Answer 1

Answer №1

One simple way to achieve this effect is by using CSS

#Oval-1 {
  opacity: 1;
  transition: opacity 400ms ease;
}

#Oval-1:hover {
  opacity: 0;
}

Answer 2

One simple way to achieve this effect is by using CSS

#Oval-1 {
  opacity: 1;
  transition: opacity 400ms ease;
}

#Oval-1:hover {
  opacity: 0;
}

Answer 3

Answer №2

The current issue stems from the fact that the #Oval-1 element gets removed from the page, which in turn triggers the mouseout event.

A potential solution is to enclose the animated element and handle events on the parent container as shown below:

<div id="Oval-1">
    <div id="test">hello</div>
</div>

 $(document).ready(function(){
       $('#Oval-1').mouseover(function() {
            $("#test").fadeOut();
        });
        $('#Oval-1').mouseleave(function() {
            $("#test").fadeIn();
        });
  });

This approach seems to resolve the issue effectively.

Additionally, it's important to ensure that removing the child element does not cause the parent container to collapse, potentially triggering the mouseleave event as well.

To visually demonstrate the concept, consider implementing these CSS styles:

#test {
    position: absolute;
}

#Oval-1 {

    background: pink;
    width: 300px;
    height: 300px;
}

If you are using a fiddle or similar tool for testing, these styles will provide a clearer representation of the scenario.

Alternatively, applying the following CSS rules may also be effective:

#Oval-1 {
    transition: all 0.5s ease-in-out;
}
#Oval-1:hover {
    opacity: 0;
}

This alternative method could potentially address the issue as well.

Answer 4

The current issue stems from the fact that the #Oval-1 element gets removed from the page, which in turn triggers the mouseout event.

A potential solution is to enclose the animated element and handle events on the parent container as shown below:

<div id="Oval-1">
    <div id="test">hello</div>
</div>

 $(document).ready(function(){
       $('#Oval-1').mouseover(function() {
            $("#test").fadeOut();
        });
        $('#Oval-1').mouseleave(function() {
            $("#test").fadeIn();
        });
  });

This approach seems to resolve the issue effectively.

Additionally, it's important to ensure that removing the child element does not cause the parent container to collapse, potentially triggering the mouseleave event as well.

To visually demonstrate the concept, consider implementing these CSS styles:

#test {
    position: absolute;
}

#Oval-1 {

    background: pink;
    width: 300px;
    height: 300px;
}

If you are using a fiddle or similar tool for testing, these styles will provide a clearer representation of the scenario.

Alternatively, applying the following CSS rules may also be effective:

#Oval-1 {
    transition: all 0.5s ease-in-out;
}
#Oval-1:hover {
    opacity: 0;
}

This alternative method could potentially address the issue as well.

Concealing and revealing an image with the onMouseOver and onMouseOut events - image quickly reemerges

Answer №1

Answer №2

Similar questions

Guide for building a Template-driven formArray in Angular

jQuery's Multi-Category Filter feature allows users to filter content

I am currently familiarizing myself with backend routes and everything seems to be going smoothly for the first time around. However, upon attempting to revisit the site for

Can someone recommend a streamlined JavaScript algorithm for identifying the unique arrays within a collection of arrays?

How to refine a schema by applying filters from another schema

The image from the local source displays correctly in the initial component without any issues, but it does not appear in its corresponding detail component

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?

Dynamic line breaks within an unordered list

What purpose does the div tagged with the class selection_bubble_root serve in Nextjs react?

Modify the background image in the Style Sheet using a combination of Javascript and Jquery

How can I modify the font style in Bootstrap?

jQuery unable to find designated elements in uploaded templates

Adjusting the template layout of Django Rest Framework

Updating values of nested objects by ID using Mongoose

JavaScript Object Retrieval: [object Object]

Stop hyperlinks from automatically opening in a new tab or window

Submit an Ajax form to process data in PHP upon selecting a radio button

Include a description in the cell of the table

Tips on sorting numbers in a column in the x e y format (displayed as powers of 10) the right way

Trouble with choosing multiple values in Select2