Maintain the visibility of the section while it is being hovered over

Question

Maintain the visibility of the section while it is being hovered over

I have successfully created a slidedown function that utilizes data in links to execute actions on specific sections. The script works well, however, there is an issue when trying to access the content within the section. Whenever I hover over the link, the section appears but it disappears when I try to interact with the content inside. How can I make the section stay visible as long as my mouse is hovering over the content without needing to change the HTML structure? Additionally, how can I keep the link underlined while the section is being hovered over?

HTML

<ul class="main-navbar-right">
    <li><a href="#" data-navigation="home">Home</a></li>
    <li><a href="#" data-navigation="explore">Explore</a></li>
    <li><a href="#" data-navigation="news">News</a></li>
</ul>

<div class="navigation-content">
    <section id="-navbar-home" data-section="home">
        <p>Home, some content with images, videos, and more and <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="explore">
        <p>Explore home <a href="#">Link</a></p>
    </section>

    <section id="-navbar-news" data-section="news">
        <p>News about home <a href="#">Link</a></p>
    </section>
</div>

CSS

#-navbar-home,
#-navbar-explore,
#-navbar-news {
    display: none;
}

a {
    text-decoration: none;
}

ul {
    width: 100%;
    display: block;
}

li {
    float: left;
    margin: 0 15px 0 0;
}

.active, a:hover {
    text-decoration: underline;
}

JavaScript

var element;
$('li > a').hover(function() {
        var navigation = $(this).data("navigation");
        var section = $("section[data-section="+navigation+"]");
        element = $(section).slideDown();
    }, function() {
        element.hide()
});

Check out the fiddle here: http://jsfiddle.net/66qz2by8/6/

javascript jquery html css

Answer 1

Answer №1

Here is a solution that might suit your needs. The hiding action should only occur when you move away from the larger div I inserted.

$('.myapp').hover(function() {}, function() {
  $('section[data-section]').hide();
});

$('.main-navbar-right li > a').hover(
  function() {
    $('section[data-section]').hide();
    $("section[data-section=" + $(this).data("navigation") + "]")
      .slideDown();
  }, function(e) {}
);

#-navbar-home,
#-navbar-explore,
#-navbar-news {
    display: none;
}

a {
    text-decoration: none;
}

ul {
  height: 20px;
    width: 100%;
    display: block;
  margin: 0px;
}
.navigation-content {
  height: 50px;
}
li {
  float: left;
  margin: 0 15px 0 0;
  margin-left: 10px;
}

.active, a:hover {
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myapp">
<ul class="main-navbar-right">
    <li><a href="#" data-navigation="home">Home</a></li>
    <li><a href="#" data-navigation="explore">Explore</a></li>
    <li><a href="#" data-navigation="news">News</a></li>
</ul>
<div class="navigation-content">
    <section id="-navbar-home" data-section="home" data-expanded="0">
        <p>Home, some content images, videos and more and <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="explore" data-expanded="0">
        <p>Home explore <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="news" data-expanded="0">
        <p>Home news <a href="#">Link</a></p>
    </section>
</div>
</div>

Answer 2

Here is a solution that might suit your needs. The hiding action should only occur when you move away from the larger div I inserted.

$('.myapp').hover(function() {}, function() {
  $('section[data-section]').hide();
});

$('.main-navbar-right li > a').hover(
  function() {
    $('section[data-section]').hide();
    $("section[data-section=" + $(this).data("navigation") + "]")
      .slideDown();
  }, function(e) {}
);

#-navbar-home,
#-navbar-explore,
#-navbar-news {
    display: none;
}

a {
    text-decoration: none;
}

ul {
  height: 20px;
    width: 100%;
    display: block;
  margin: 0px;
}
.navigation-content {
  height: 50px;
}
li {
  float: left;
  margin: 0 15px 0 0;
  margin-left: 10px;
}

.active, a:hover {
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myapp">
<ul class="main-navbar-right">
    <li><a href="#" data-navigation="home">Home</a></li>
    <li><a href="#" data-navigation="explore">Explore</a></li>
    <li><a href="#" data-navigation="news">News</a></li>
</ul>
<div class="navigation-content">
    <section id="-navbar-home" data-section="home" data-expanded="0">
        <p>Home, some content images, videos and more and <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="explore" data-expanded="0">
        <p>Home explore <a href="#">Link</a></p>
    </section>

    <section id="-navbar-explore" data-section="news" data-expanded="0">
        <p>Home news <a href="#">Link</a></p>
    </section>
</div>
</div>

Answer 3

Answer №2

To replace the use of .hover, try using .mouseenter instead. Ensure to hide the previously displayed section before displaying the new one.

Check it out here: https://jsfiddle.net/svArtist/vttjbbLy/

declare variable elem;

$('li > a').mouseenter(function () {
    var navigation = $(this).data("navigation");
    var section = $("section[data-section=" + navigation + "]");
    $("section").each(function () {
        if ($(this).data("section") !=  navigation) {
            $(this).fadeOut();
        }
    });
    elem = $(section).slideDown();
});

Answer 4

To replace the use of .hover, try using .mouseenter instead. Ensure to hide the previously displayed section before displaying the new one.

Check it out here: https://jsfiddle.net/svArtist/vttjbbLy/

declare variable elem;

$('li > a').mouseenter(function () {
    var navigation = $(this).data("navigation");
    var section = $("section[data-section=" + navigation + "]");
    $("section").each(function () {
        if ($(this).data("section") !=  navigation) {
            $(this).fadeOut();
        }
    });
    elem = $(section).slideDown();
});

Answer 5

Answer №3

One way to achieve a similar effect using just CSS is by enclosing the "dropping-down" element within the li itself, initially setting its height to 0px and then adjusting it on hover. This can be done with a clever trick involving overflow:hidden to hide the contents and position:absolute to prevent the element from shifting the links:

Check out this fiddle for a live example.

.dropdown {
    width:200px;
    max-height:0px;
    transition:all 0s ease;
    -moz-transition:all 0s ease;
    -ms-transition:all 0s ease;
    -o-transition:all 0s ease;
    -webkit-transition:all 0s ease;
    overflow:hidden;
    position:absolute;
}
li:hover .dropdown, .dropdown:hover {
    max-height:200px;
    transition:all .4s ease;
    -moz-transition:all .4s ease;
    -ms-transition:all .4s ease;
    -o-transition:all .4s ease;
    -webkit-transition:all .4s ease;
}

Answer 6

One way to achieve a similar effect using just CSS is by enclosing the "dropping-down" element within the li itself, initially setting its height to 0px and then adjusting it on hover. This can be done with a clever trick involving overflow:hidden to hide the contents and position:absolute to prevent the element from shifting the links:

Check out this fiddle for a live example.

.dropdown {
    width:200px;
    max-height:0px;
    transition:all 0s ease;
    -moz-transition:all 0s ease;
    -ms-transition:all 0s ease;
    -o-transition:all 0s ease;
    -webkit-transition:all 0s ease;
    overflow:hidden;
    position:absolute;
}
li:hover .dropdown, .dropdown:hover {
    max-height:200px;
    transition:all .4s ease;
    -moz-transition:all .4s ease;
    -ms-transition:all .4s ease;
    -o-transition:all .4s ease;
    -webkit-transition:all .4s ease;
}

Maintain the visibility of the section while it is being hovered over

Answer №1

Answer №2

Answer №3

Similar questions

Can the looping feature be applied to CSS?

Step-by-step guide to dynamically load Bootstrap tab panels through tab clicks

Adding a Fade Effect in jQuery: A Step-by-Step Guide

Tips for extracting JSON data from multiple websites using Python

Endless Google Locations Instances

Retrieve the data attribute from a specific dropdown menu using jQuery

What is the best way to retrieve and display a well-structured JSON object in a Node

Why does `overflow-wrap: break-words` behave differently from `word-break: break-words` and which one is more effective in certain situations?

What is the best way to retrieve the URL from a specific HTML tag?

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

Adjusting webpage zoom based on different screen sizes

Attempting to divide the given web address

Is it possible for the variables in my php website to be overwritten if two users from different locations are accessing it simultaneously?

How can you determine if a specific ID is present on a page using jQuery?

Footer not disappearing

Next.js is throwing an error: "Module cannot be found: Unable to resolve 'canvg'"

Iterate through each line of code and modify the integer in order to target elements by their class

Tips for integrating the legacy Twitter API method into an ASP.Net website

"Repeating SignalR Messages: Issue of Duplication when Stopping and Restarting

Troubleshooting issues with browser scrollbars in a Silverlight application (HTML)