Instructions on how to toggle the visibility of a div when hovering over a different a tag

Question

Instructions on how to toggle the visibility of a div when hovering over a different a tag

To keep things simple, I'm looking to create a visibility toggle effect on a div when someone hovers over an anchor tag. Similar to the behavior of the four buttons on this example link:

The issue I'm facing is that I want the div to appear or be visible when hovering over the anchor tag, but once I hide the div it doesn't reappear. I've tried a few different approaches, such as:

$("#function").on("mouseover",this, function () {
            $(this).addClass("show");
        })
        $("#function").on("mouseout",this, function () {
            $(this).removeClass("show");
            $(this).addClass("hide");
        })

Another attempt:

$("#function").hover(
                  function () {
                    $(this).addClass("hide");
                  },
                  function () {
                    $(this).removeClass("hide");
                  }

        );

And also:

$("#butt").on("mouseover", this, function(){
                $(this).find("div#function").show();
                //$("#function").toggleClass("visible");
            });
            $("#butt").on("mouseout", this, function(){
                $(this).find("div#function").hide();
                //$("#function").toggleClass("visible");
            });

javascript jquery html css jquery-ui

Answer 1

Answer №1

Consider using mouseenter instead of mouseover for a more precise event trigger. The mouseover event fires repeatedly as you move within an element, whereas mouseenter only triggers once when entering the element. To see the difference, scroll to the bottom of this page: http://api.jquery.com/mouseenter

Here is the solution that closely resembles the example on the provided site.

<script>
$(document).ready(function()
{
    $("#function").mouseenter(function(event)
    {
        event.stopPropagation();
        $(this).addClass("show");
    }).mouseleave(function(event)
    {
        event.stopPropagation();
        $(this).removeClass("show");
    });
});
</script>

Styling:

<style>    
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>

HTML structure:

<div id="function" class="functionBlock">
    <h5>Demo </h5>
    <ul>
        <li>APPLE</li>
        <li>SAMSUNG</li>
    </ul>
</div>

View the example on jsFiddle: http://jsfiddle.net/TAZmt/1/

Answer 2

Consider using mouseenter instead of mouseover for a more precise event trigger. The mouseover event fires repeatedly as you move within an element, whereas mouseenter only triggers once when entering the element. To see the difference, scroll to the bottom of this page: http://api.jquery.com/mouseenter

Here is the solution that closely resembles the example on the provided site.

<script>
$(document).ready(function()
{
    $("#function").mouseenter(function(event)
    {
        event.stopPropagation();
        $(this).addClass("show");
    }).mouseleave(function(event)
    {
        event.stopPropagation();
        $(this).removeClass("show");
    });
});
</script>

Styling:

<style>    
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>

HTML structure:

<div id="function" class="functionBlock">
    <h5>Demo </h5>
    <ul>
        <li>APPLE</li>
        <li>SAMSUNG</li>
    </ul>
</div>

View the example on jsFiddle: http://jsfiddle.net/TAZmt/1/

Answer 3

Answer №2

Understood, just made some minor modifications to the selectors

$("#button")
  .mouseover(function () {
    $("#popup").show();
  })
  .mouseout(function () {
    $("#popup").hide();
  });

Answer 4

Understood, just made some minor modifications to the selectors

$("#button")
  .mouseover(function () {
    $("#popup").show();
  })
  .mouseout(function () {
    $("#popup").hide();
  });

Answer 5

Answer №3

$(".link").mouseover(function(){
    $(".content").slideToggle();
});

here is the corresponding html:

<a href="#" class="link">CLICK HERE</a>
<div class="content" style="display:none">The information you seek will be displayed here</div>

Answer 6

$(".link").mouseover(function(){
    $(".content").slideToggle();
});

here is the corresponding html:

<a href="#" class="link">CLICK HERE</a>
<div class="content" style="display:none">The information you seek will be displayed here</div>

Answer 7

Answer №4

By utilizing the concept of adding a class on the root div element during the event of mouse entering, you can achieve the desired outcome. This newly added class will trigger the hidden unordered list (<ul>) to become visible.

.shown ul{
    display: block !important;
}

http://jsfiddle.net/28bb8/2/

UPDATE:

Minor adjustments have been made to the CSS in order to better match the expected behavior. However, it is important to customize the CSS according to your specific requirements. I hope this solution proves to be beneficial for you.

$("document").ready(function(){
    $(".wrap").hover(
        function () {
            $(this).addClass("shown");
       },
       function () {
           $(this).removeClass("shown");
       }
    );
});

Answer 8

By utilizing the concept of adding a class on the root div element during the event of mouse entering, you can achieve the desired outcome. This newly added class will trigger the hidden unordered list (<ul>) to become visible.

.shown ul{
    display: block !important;
}

http://jsfiddle.net/28bb8/2/

UPDATE:

Minor adjustments have been made to the CSS in order to better match the expected behavior. However, it is important to customize the CSS according to your specific requirements. I hope this solution proves to be beneficial for you.

$("document").ready(function(){
    $(".wrap").hover(
        function () {
            $(this).addClass("shown");
       },
       function () {
           $(this).removeClass("shown");
       }
    );
});

Answer 9

Answer №5

No Javascript needed for this; CSS is all you need to achieve it

Here's the HTML:

<div class="container">
    <div class="preview"><img src="http://lorempixel.com/300/400"/></div>
    <div class="details">
        <ul>
            <li>Click here ...</li>
            <li>Or there ...</li>
        </ul>
    </div>
</div>

CSS rules:

.container {
    width: 300px;
    height: 400px;
}

.details {
    display: none;
}

.container:hover .preview {
    display: none;
}

.container:hover .details {
    display: block;
}

You can also try it out on JSFiddle.

Answer 10

No Javascript needed for this; CSS is all you need to achieve it

Here's the HTML:

<div class="container">
    <div class="preview"><img src="http://lorempixel.com/300/400"/></div>
    <div class="details">
        <ul>
            <li>Click here ...</li>
            <li>Or there ...</li>
        </ul>
    </div>
</div>

CSS rules:

.container {
    width: 300px;
    height: 400px;
}

.details {
    display: none;
}

.container:hover .preview {
    display: none;
}

.container:hover .details {
    display: block;
}

You can also try it out on JSFiddle.

Answer 11

Answer №6

Hopefully, this is the solution you have been looking for.

To implement this functionality, simply add the code snippet provided immediately after your <body> tag:

<script type="text/javascript">
function toggle(id) {
   var element = document.getElementById(id);
   if (element.style.display == 'block')
      element.style.display = 'none';
   else
      element.style.display = 'block';
}
</script>

Below is a link that triggers the toggling effect when hovered over, along with the corresponding div that gets toggled:

<a href="javascript: void(0);" onmouseover="toggle('toggleme');">
    Hover over this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div will be "toggled"</div>

Answer 12

Hopefully, this is the solution you have been looking for.

To implement this functionality, simply add the code snippet provided immediately after your <body> tag:

<script type="text/javascript">
function toggle(id) {
   var element = document.getElementById(id);
   if (element.style.display == 'block')
      element.style.display = 'none';
   else
      element.style.display = 'block';
}
</script>

Below is a link that triggers the toggling effect when hovered over, along with the corresponding div that gets toggled:

<a href="javascript: void(0);" onmouseover="toggle('toggleme');">
    Hover over this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div will be "toggled"</div>

Instructions on how to toggle the visibility of a div when hovering over a different a tag

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Adjust the Pivot Point of a GLTF Model in ThreeJS Manually

What is the best method to incorporate a Node.js package into a Java program?

How come the element is not appearing in the div even though it should be there?

Dissipating visuals / Effortless website navigation

When running through a loop, the JSON array data containing the merged arrays is not being shown as expected

Error: jquery unexpectedly encountered a token 'if'

Cipher/decipher URL Redirect Parameter

Understanding the relationship between PHP session and JavaScript variables in the multi-step user registration process

How come JSON.parse is altering the data within nested arrays?

Storing props in JSX components using variables in React.jsLearn how to set props in JSX components and

Tips for accessing information from a FOR loop within DIV tags

Enhancing the efficiency of a JavaScript smooth scrolling feature for numerous listed items

Naming axes in Chart.js is a simple process that can easily be implemented

Switch the custom audio control button on and off within a v-for loop

What's the best way to create a responsive design for two buttons?

Troubleshooting video streaming loading issues caused by 404 errors in URL paths with videojs

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Utilizing Struts 2 to Manage HTTP Array Parameters through Ajax Requests

Having trouble with jQuery loading for the first time

Passing a JSONArray to a webview using addJavascriptInterface can provide valuable data