Display the div element only when the mouse is hovering over the button

I need a hidden text inside a div that will only appear when the mouse pointer is hovering over a specific button.

Here is my current code:

// Show help-text on hover
    $("#help-container")
    .mouseover(function(e) {
        $(this).find("#help-text").fadeIn(100).width("80%");
    })
    .mouseleave(function(e) {
        $(this).find("#help-text").fadeOut(100).width("0%");
    });
#help-container {
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#help-container #help-btn {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    background-color: green;
    float: left;
}
#help-container #help-text {
    width: 0;
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>

The functionality seems to be working correctly for showing and hiding the text. However, upon leaving the button/container, the text doesn't disappear as expected.

What could be the issue with the logic of my code?

Edit: While there are alternative solutions available on Stackoverflow, I am specifically interested in understanding why my implementation is not functioning as intended.

javascripthtmljquerycss

Answer №1

You can achieve the effect of showing and hiding a div on hover without using JavaScript by utilizing pure CSS, which is significantly faster.

Below is an example of CSS code that demonstrates how to show and hide a div when another div is hovered over:

#help-container #help-btn:hover ~ #help-text{
  display: block;
}

Check out the snippet below for reference:

#help-container {
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
}
#help-container #help-btn {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    background-color: green;
    float: left;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
#help-container #help-text-container {
    width: 0%;
    display: none;
    overflow: hidden;
    height:75px;
}

#help-container #help-btn:hover ~ #help-text-container{
  display: block;
  animation:widthanim 0.5s normal linear forwards;
}

@keyframes widthanim {
   from { width: 0% }
   to { width: 80%;  }
}
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text-container"><div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div></div>
  </div>

Answer №2

Assuming you wish to maintain the same element visible when transitioning the mouse from the green help block to the red section.

To simplify, set the width of the element to 100% instead of scaling it down to 0%, and apply fadeIn and fadeOut effects. Using display:none is preferred over width:0 for hidden elements as there is no width set on a hidden element. This method will function similarly to your existing setup but without creating a trigger loop.

$("#help-container")
  .mouseover(function(e) {
    $(this).find("#help-text").fadeIn(100);
  })
  .mouseleave(function(e) {
    $(this).find("#help-text").fadeOut(100);
  });
#help-container {
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
}

#help-container #help-btn {
  padding: 10px;
  box-sizing: border-box;
  display: inline-block;
  background-color: green;
  float: left;
}

#help-container #help-text {
  width: 100%;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="help-container">
  <div id="help-btn">Help</div>
  <div id="help-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

Answer №3

You may want to consider using width(0%) instead of width(80%).

This solution worked well for me, so hopefully it will work for you too. Have a wonderful day!

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

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

javascriptjqueryhtmlregexeditor

Tips for receiving feedback when uploading multiple images

I've been facing challenges with receiving a response when uploading multiple images using the API. Despite getting a valid response when uploading a single image, I'm not getting the expected response for multiple uploads. Below is my code: fil ...

javascriptreactjsimage-uploading

Creating an AJAX request in Knockout.js

Forgive me if this question has been asked previously, as my search attempts have been unsuccessful in finding a solution. Despite consulting the knockout documentation, I still struggle to articulate my issue effectively for searching. My situation invol ...

javascriptajaxknockout.js

The Angular Element's emitted number transforms into a string once it reaches the JavaScript event listener

Within my Angular Elements web component, I have defined and emitted events in the following way: @Input() groupId: number = -1; @Output('group_change') groupChange!: EventEmitter<number>; ... this.groupChange.emit(groupId); I integrated ...

javascriptangularangular-elements

Having trouble showing images from block content using PortableText?

It's been quite a while now that I've been stuck on this issue. Despite being in a learning phase, I find myself unable to progress due to this specific problem. While links and text elements are functioning properly, I have encountered difficul ...

javascriptreactjsnext.jssanity

What is the best method for importing Bootstrap into SvelteKit?

I am currently working on a SvelteKit website. I have integrated Bootstrap 5 into my project by adding it to the app.html file provided by the SvelteKit Skeleton starter project: <!-- Bootstrap styles and javascript --> <link rel="stylesheet ...

javascriptbootstrap-5sveltesveltekit

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

htmljquerycssbootstrap-5

Learn the step-by-step process of clicking on a button to modify its properties and deactivate it

I could really use some assistance. I'm trying to make a button: <v-btn dark color="primary" class="square">Tile 1</v-btn> Is there a way I can modify it so that when clicked, it changes to flat, becomes disabled, and switches its color ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI

import React from 'react'; import { makeStyles, Typography, Grid } from '@material-ui/core'; const styles = makeStyles((theme) => ({ root: {}, textStyle: { fontFamily: 'brandon-grotesque-black', tex ...

cssmaterial-uihovermaterial-designstyling

Using the clientWidth property in React

While I have a solid background in Javascript, I am relatively new to working with React. In my previous projects where I coded directly in javascript for the browser, I frequently used the following code snippet: width = document.getElementById('elem ...

javascriptreactjssvgdynamicwidth

Utilizing AngularJS to calculate elapsed time and continuously update model and view accordingly

Situation Currently, I am interested in developing a web application that tracks a specific data set based on the time since the page was loaded. For example, "how many calories have you burned since opening this webpage?" I am still trying to grasp the ...

javascriptangularjstimertimeout

What issue can be identified in this HTML/CSS code?

Here is the code snippet I am working with: http://jsfiddle.net/7jGHS/1299/ This is the HTML code: <div class="text1"><h2><span>THIS IS A TEST</span></h2> <p>1800 - 1570 - 000</p> <h2><span>T ...

htmlcss

Steps to remove a row from a table in a ReactJS component

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

javascripthtmlreactjs

"Dynamic Addition of Textboxes to Webpages with the Help of jQuery

Currently, I am facing a challenge in adding a textbox to a webpage in ASP.NET MVC using jQuery. My goal is to have a button that, when clicked, appends a text box to the existing collection of Textboxes with a specified class. Below is the jQuery code sni ...

javascriptc#jqueryasp.net-mvcasp.net-mvc-5

What is the reason the useEffect hook does not function properly with a state variable within context?

Check out my code here. I'm trying to display the content of the array testingData, but it's not showing up. If I remove the useEffect hook, it works fine. Can you help me understand why and how to fix it? ...

javascriptreactjs

Retain the formatting of HTML while extracting the text

Is there a simple way to extract text from HTML source without losing formatting (such as line breaks and spaces)? Currently, my text extraction process looks like this: page_title_element = driver.find_element_by_xpath("x-path") page_title = pa ...

pythonhtmlselenium

Content on iPad is not properly aligned with the gap below it

I have a webpage with links in the center and a div floated to the right, taking up about 25% of the screen. There is another div with position: fixed, left: 0, bottom: 0. On my desktop, using Firefox, the image inside the fixed position div appears in the ...

htmlcssipad

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div. I want to display an image control button next to each image. This button should on ...

javascriptjqueryhtmlcss

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

jqueryhtmlajaxforms

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

This is my code snippet: <div class="rButtons"> <input type="radio" name="numbers" value="10" />10 <input type="radio" name="numbers" value="20" />20 <input type="radio" name="numbers" value="other" />other </div> ...

phpjavascriptjqueryhtmlajax