Display or conceal several elements upon hover using JQuery and HTML

Question

Display or conceal several elements upon hover using JQuery and HTML

Here is the current progress I have made:

<div style = "position: relative;">
<a href = "#games">
<div class="sidenavOff">
<img src = "images/card_normal.png" />
<img src = "images/category_icons/icon_games.png" style = "position: absolute; top: 10px; left: 40px;" />
<img src = "images/category_titles/title_games.png" style = "position: absolute; top: 160px; left: 40px;" />
</div>
<div class = "sidenavOver">
<img src = "images/hover/card_hover.png" />
<img src = "images/category_titles/title_games.png" style = "position: absolute; top: 10px; left: 40px;" />
<img src = "images/hover/card_hover_separator.png" style = "position: absolute; top: 40px; left: 40px;" />
Show various text content here
<img src = "images/button_start_normal.png" style = "position: absolute; top: 200px; left: 40px;" />
/div>
</a>
</div>

The setup involves a notecard image (card_normal.png) with multiple transparent images overlaying it. When the mouse hovers over the card, icon Games and title Games are displayed on it. The goal is to show additional elements like the title_games.png, a description, and button_start_normal.png in vertical order when hovering over different areas of the card.

Below is the jQuery code snippet attempting to achieve this effect:

$(document).ready(function() {
$(“div.sidenavOff”).mouseover(function(){
$(this).removeClass().addClass(“sidenavOver”);
}).mouseout(function(){
$(this).removeClass().addClass(“sidenavOff”);
});
});

Here is how it looks without hover:

And with hover effect applied:

javascript jquery html css

Answer 1

Answer №1

This is the jquery script that I have been working on [...]. It's a bit confusing to me

$(document).ready(function () {/* code for the function */});

Once the document (represented by jQuery object $) is fully loaded and ready, execute a specific function as defined in /* code for the function */

$("div.sidenavOff")

Utilize jQuery $ to select all matching HTMLElements identified by the CSS Selector div.sidenavOff

.mouseover(function () {
    $(this).removeClass().addClass("sidenavOver");
})

Upon mouseover event (mouseover), remove the current class from the element (referred to as this) and replace it with sidenavOver

.mouseout(function () {
    $(this).removeClass().addClass("sidenavOff");
})

When the mouse exits an element (mouseout), similar action occurs as with mouseover, but now adding sidenavOff class back to that particular element.

You're on the right track, here's a suggested modification for improved clarity:

$(document).ready(function () {
    $("div.sidenavOff").mouseover(function () { // introducing visibility control
        $("div.sidenavOver").addClass("showme"); // apply "showme" to div.sidenavOver
    }).mouseout(function () { // end of visibility setting
        $("div.sidenavOver").removeClass("showme"); // remove "showme" from div.sidenavOver
    });
});

In this case, the class showme corresponds to certain CSS rules enabling the display of the element

.showme {display: block;}

Answer 2

This is the jquery script that I have been working on [...]. It's a bit confusing to me

$(document).ready(function () {/* code for the function */});

Once the document (represented by jQuery object $) is fully loaded and ready, execute a specific function as defined in /* code for the function */

$("div.sidenavOff")

Utilize jQuery $ to select all matching HTMLElements identified by the CSS Selector div.sidenavOff

.mouseover(function () {
    $(this).removeClass().addClass("sidenavOver");
})

Upon mouseover event (mouseover), remove the current class from the element (referred to as this) and replace it with sidenavOver

.mouseout(function () {
    $(this).removeClass().addClass("sidenavOff");
})

When the mouse exits an element (mouseout), similar action occurs as with mouseover, but now adding sidenavOff class back to that particular element.

You're on the right track, here's a suggested modification for improved clarity:

$(document).ready(function () {
    $("div.sidenavOff").mouseover(function () { // introducing visibility control
        $("div.sidenavOver").addClass("showme"); // apply "showme" to div.sidenavOver
    }).mouseout(function () { // end of visibility setting
        $("div.sidenavOver").removeClass("showme"); // remove "showme" from div.sidenavOver
    });
});

In this case, the class showme corresponds to certain CSS rules enabling the display of the element

.showme {display: block;}

Answer 3

Answer №2

It seems like the goal is to toggle the visibility of the "sidenavOver" div when hovering over the container. Is my understanding correct?

I have modified your HTML code in this jsfiddle by adding a class to the container div and commenting out the missing images. http://jsfiddle.net/joshvito/GaZQ6/

For example:

//on hover over the container; you can use the a tag too, whichever element you want to bind the event to 
$('.container').on({
    mouseenter: function () {
        $(".sidenavOff").hide(); //On mouseover, hide the first div
        $(".sidenavOver").show();
    },
    mouseleave: function () {
        $(".sidenavOff").show();
        $(".sidenavOver").hide();
    }
});

A helpful resource for jQuery event handlers can be found at JQUERY API Documentation for .on

Answer 4

It seems like the goal is to toggle the visibility of the "sidenavOver" div when hovering over the container. Is my understanding correct?

I have modified your HTML code in this jsfiddle by adding a class to the container div and commenting out the missing images. http://jsfiddle.net/joshvito/GaZQ6/

For example:

//on hover over the container; you can use the a tag too, whichever element you want to bind the event to 
$('.container').on({
    mouseenter: function () {
        $(".sidenavOff").hide(); //On mouseover, hide the first div
        $(".sidenavOver").show();
    },
    mouseleave: function () {
        $(".sidenavOff").show();
        $(".sidenavOver").hide();
    }
});

A helpful resource for jQuery event handlers can be found at JQUERY API Documentation for .on

Display or conceal several elements upon hover using JQuery and HTML

Answer №1

Answer №2

Similar questions

What is the best method to extract information from JavaScript tables using Python and Selenium?

Utilizing Redux in my ASP.NET MVC application with the help of RequireJS and TypeScript (Issue: Encountering a script error for "redux" dependency)

Guide to invoking an HTML document through PHP

Sending POST Requests with Next.js Version 14

The functionality of CSS transform appears to be malfunctioning on Firefox browser

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

How to extract hrefs within <li> tags from a <ul> element with Cheerio

Testing the selection of dropdown values in Angular2 using unit tests

Is Eslint functioning in just one Sublime Text project?

Side Menu with Fixed Position Created with Tailwind CSS

Is it possible to stack CSS pseudo-elements?

Is it necessary for every single product to have its very own webpage?

Secret icon revealing on mouseover

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Generate an Array reference using the index of elements instead of duplicating the values

Convert the class to a file upload using jQuery

Learn how to dynamically chain where conditions in Firebase without prior knowledge of how many conditions will be added

Ways to display HTML elements depending on the width of the window

Tips for receiving alerts on external updates to a mongo collection using sails

jQuery Carousel: Adjusting the Displayed Items