Utilizing jQuery to hide a div when hovered over, but keeping it visible when clicked

In my design, there are several buttons styled with position: absolute; and display:block;, along with hidden divs styled with position: absolute; and text inside. By default, these divs are hidden using display:none;.

The goal is to make the div next to a button appear when hovering over it, with a fade or scroll effect, and then disappear when moving the cursor away from the button.

If a button is clicked, the respective div should remain visible (i.e. display:block;), only disappearing again when the button or div itself is clicked on. Hovering over them should not trigger any changes.

Although this concept seemed simple, I'm having trouble implementing it successfully.

javascriptjqueryhtmlcss

Answer №1

If you have a basic understanding of HTML, this is the code I used to achieve it.

HTML

<a href="#" class="mybutton">button</a>
<div class="mydiv">some text in it.</div>

jQuery

$('.mydiv').addClass('hover').click(function(){
     $(this).addClass('hover').fadeOut();
});

$('a.mybutton').click(function() {
    $('.mydiv').toggleClass('hover').show();
    // $('.mydiv').removeClass('hover').show();
}).hover(function() {
    $('.mydiv.hover').fadeIn();
}, function() {
    $('.mydiv.hover').fadeOut();
});

Check out this cool demo!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up a navigation path using Vue Router

I'm facing some challenges creating a router using Vue.js. My main.js file was functioning well with the code below, but when I added some routes, I ran into the following error: MAIN.JS BEFORE (WORKING WELL) import 'bootstrap/dist/css/bootstrap ...

javascriptvue.js

What causes AsyncStorage to lose one value while another value remains intact?

My last session id is stored using AsyncStorage, but for some reason it loses a specific value and I can't figure out why. I created an app that should automatically select the last chosen group on startup. However, after restarting the app, AsyncSto ...

javascriptnode.jsreact-nativeasyncstorage

Tips for resolving alignment issues in a chat box:

I am currently working on adjusting the alignment of my chat box app. I have placed 3 div elements with the class .bubble inside a div with the class .chatlines, but they appear to be clustered together instead of aligned properly. It's challenging to ...

htmlcssalignmenttext-alignmentdivide

guide on creating a simple line highchart using JSON data

Here is the JSON data I have: {"09/02/2014 15:36:25":[33.82,33.42,40.83],"08/11/2014 16:25:15":[36.6,33.42,40.45],"07/30/2014 08:43:57":[0.0,0.0,0.0],"08/12/2014 22:00:52":[77.99,74.1,80.12],"08/12/2014 21:19:48":[56.91,63.23,52.42],"07/23/2014 13:37:46": ...

javascriptjsongraphchartshighcharts

Expanding with additional content using a div when the "read more" button is clicked, and including a close link to easily dismiss the expanded section

I am in need of assistance with my website, specifically regarding the functionality to expand and collapse div tags when a user clicks on "read more" or "close". As I am not familiar with jQuery, I would appreciate any JavaScript or CSS code that can achi ...

javascripthtmlcss

Pressing the button twice is necessary for troubleshooting when initially opened

After creating a code snippet that hides or shows part of the text when a button is clicked, I noticed that upon launching the page, it requires two clicks on the button to function properly. This issue occurs only during the initial launch, as after the f ...

javascriptjqueryhtmlcss

Leveraging JEST for Testing Document Object Model Components

I am diving into the world of JEST and trying to wrap my head around it, so I might be a little out of my depth here. But, I have a test in mind that checks the title of my Index page against a reference from this documentation: https://jestjs.io/docs/en/t ...

javascriptnode.jsjestjs

Incorporating an Aspx Page into a Static Website

We currently have a static website consisting of all html files. In addition, we have a dynamic ASPX website with a specific page (RegisterAndBuy.aspx) that displays data based on user selections and collects personal information to send to the Admin via ...

phpasp.nethtml

Is it necessary to utilize process.env in node.js?

In my project, there is a .env file containing the following: ABC='abc' While in my app.js I can access the value abc using process.env.ABC, how can I require it to be used in my models' files? Attempting to use process.env.ABC in my model ...

javascriptnode.jsexpress

Positioning columns in Bootstrap with a fixed layout

Is there a way to troubleshoot issues with Bootstrap col? I attempted the following solution, but it's not yielding the desired outcome: <div class="row"> <div class="col-md-6">Content goes here...</div> <div class="col ...

htmltwitter-bootstrapcssbootstrap-4

Using jQuery to extract contact information from Google: A step-by-step guide

I'm currently using Google's API to access my contact list information and after logging the output in the console function fetch(token) { $.ajax({ url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token. ...

javascriptjqueryjsongoogle-contacts-api

"Enhance your visuals with a rotating light source in combination with a camera and Orbit

In my Three.js scene, I've integrated OrbitControls.js for rotation and panning functionality. However, I'm facing an issue with the lighting setup - I want the lighting to move along with the camera, ensuring that the object is always well-illum ...

javascript3dthree.js

Launching npm using the command "npm run protractor" results in console errors being thrown upon completing the test

Recently, we made the decision to streamline the installation process of Protractor on local machines by specifying it in package.json rather than installing it individually with the -g flag. The addition we made looks something like this: "scripts": { ...

javascriptnode.jsangularprotractore2e-testing

Eliminating the Double Tap Issue on Dropdowns in Bootstrap 3.0

I am transitioning from Bootstrap 2.3 to Bootstrap 3.0 and need to eliminate the double tap feature on the li elements within a dropdown in a navbar. For example: <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a&g ...

javascriptjqueryhtmlcsstwitter-bootstrap

Absolute positioned content causing unexpected spacing on top of relative positioned content

I've been experimenting with a fantastic technique by Chris Coyier for implementing full page video backgrounds with content scrolling over the video. However, I've encountered an issue where there's an unexpected gap to the right in Windows ...

javascripthtmlcss

Why is it that I am not receiving JSON data in my Angular application?

I am currently working on a class within a webapi public class ResponseObject { public int Success { get; set; } public string Message { get; set; } public object Data { get; set; } } Within my ASP.NetCore, I have the following method: publi ...

javascriptjsonangulartypescriptasp.net-core

Creating unique identifiers/primary keys for resources in react-admin: A step-by-step guide

I am working on a nextJS project that utilizes redux for state management and an admin panel called react admin. In my project, I decided to use _id instead of id as the keys. To achieve this, I followed the instructions provided in this custom identifiers ...

javascriptreactjsnext.jsreact-admin

Challenge with AngularJS 1.6.8: Struggling to transfer data effectively between controller and view

I seem to be lost in my code. Here are the code snippets for all the respective files. It's a simple Single Page Application with routing. index.html <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf ...

javascriptangularjsangularjs-1.6

Arranging two input boxes side by side: a step-by-step guide

I designed two input boxes and tried to move them together, but unfortunately my code is not working as expected It seems like a simple issue, yet the input boxes are displaying like a list rather than side by side. <link href="https://cdnjs.cloud ...

htmlcssbootstrap-4

Troubleshooting Issues with DataTables in ASP.NET Web Application Visual Studio 2013

I recently attempted to migrate a web application project that I had created in Visual Studio 2012 to the new ASP.NET Web Application (Web Forms) (4.5) in Visual Studio 2013. My understanding was that the new structure included jQuery 1.10.2 within the d ...

jqueryasp.netdatatablesasp.net-4.5