Why isn't my jQuery hover function working correctly?

How can I display a description on an image when hovering over it? I've been attempting to achieve this using jQuery, but the function doesn't seem to be working. Will my other functions interfere with each other even though they utilize different classes and ids?

Below is the code snippet in question:

$(document).ready(function() {
        $('#box').hover(function() {
            $('#details').show(500);
        })
    })
.box .details p {
        font-size: 14px;
        display: none;
    }
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
      <div class="col-lg-2 box" id="box">
          <div class="imgBox">
              <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt="">
          </div>
          <div class="details" id="details">
              <p>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</p>
          </div>
      </div>

javascriptjqueryhtmlcss

Answer №1

To properly show the paragraph within the div (#details p rather than just #detail), make sure to target what's initially hidden.

Here is an edited version with 2 boxes:

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).find('.details p').show(500);
    $(this).addClass('highlighted');
  })
})
.box .details p {
  font-size: 14px;
  display: none;
}

.highlighted {
  background-color: purple;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div class="col-lg-2 box">
  <div class="imgBox">
    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
  </div>
  <div class="details">
    <p>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</p>
  </div>
</div>

<div class="col-lg-2 box">
  <div class="imgBox">
    <img class="product-mouseover" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
  </div>
  <div class="details">
    <p>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</p>
  </div>
</div>

Answer №2

The functionality is operational, however the intention seems to be displaying a div that is currently visible. The correct target should be the <p>. To achieve this, use $('#details p').show(500) in the provided code snippet.

$(document).ready(function() {
    $('#box').hover(function() {
        $('#details p').show(500);
    })
})

Answer №3

When hovering over the image, you are revealing the details section but the paragraph inside remains out of sight. To fix this, transfer the display: none property from the paragraph to .box .details.

Answer №4

Exploring the wonders of hover()

When you call 

$( selector ).hover( handlerIn,handlerOut)
, it is essentially a shortcut for: 
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut )
;

In order to fully utilize hover(), you must include two handlers instead of just one. Make sure to add a handler for mouseleave as well. Here's an example:

$(document).ready(function() {
    $('#box').hover(function() {
        $('#details').show(500);
    }, function() {
        $('#details').hide(500);
    })
})

To learn more about how to use hover(), visit https://api.jquery.com/hover/

If your intention is to only show on mouseenter, consider using mouseenter() https://api.jquery.com/mouseenter/

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

Understanding the logic in the "-1" is crucial for implementing a for loop with an array in JavaScript

const dreamDestinations = ['Tokyo', 'Sydney', 'Rome']; for(let i = dreamDestinations.length - 1; i >= 0; i--) { console.log('Exploring ' + dreamDestinations[i] + ' would be amazing!'); } Hey everyone, ...

javascriptarraysfor-loop

Mapping strings to enums in Angular is an essential task that allows for seamless communication

Currently, I am facing an issue regarding mapping a list of JSON data to my model. One of the properties in my model is defined as an enum type, but in the JSON data, that property is provided as a string. How can I correctly map this string to an enum val ...

javascriptangulartypescript

What is the best way to correct the discrepancy between the serialized C# date and the JavaScript date, which seems to be off by either a day or due to the timezone

After some time of posting this, I managed to find the solution. Situation: I am serializing a date from a C# ControllerAction and saving it in a js variable. Then I convert it to a js date using toISOString, but the resulting js date shows as the previou ...

javascriptc#datetimetimezone

What is the best way to utilize multiple models under a single root in ReactJS?

Greetings! I currently have a root structure in the following code snippet: <body> <noscript>You need to enable JavaScript to run this app.</noscript> <button >Platform</button> <button >Game</button> < ...

javascriptnode.jsreactjsasp.net-core-webapi

Setting up Socket.io results in numerous transport polling GET requests being initiated

I have set up an express.js server-side and followed the socket.io guide. However, I am facing issues with the socket connection not being successful, and there seems to be a high number of unexpected GET requests like this: https://i.stack.imgur.com/GDGg ...

javascriptnode.jssocketsexpresssocket.io

The jqGrid displaying data with datatype set to "jsonstring" is only showing the first page

When my JqGrid receives data from the server in JSON format, I use the following parameters: _self.GridParams = { rows: 7, page: 1, sidx: '', sord: '' } Once the data is retrieved, it is stored in the variable 'data': Objec ...

javascriptjqueryjsonjqgrid

When using a React Router path variable along with other paths, React may have difficulty distinguishing between them

Setting up react router in my project to differentiate between user username variables and other paths is proving challenging. For instance: baseUrl/admin baseUrl/daniel Currently, React is unable to distinguish between the two. My intention is to query ...

javascriptreactjsreact-router

Is it possible to enlarge a webpage programmatically similar to how it is done in browsers like Internet Explorer or Firefox?

Here's a simple scenario - my layout is 800 by 600. When I press Ctrl and +, it zooms in and looks great. I'm curious if there's a way to achieve the same effect using CSS or Javascript? Ideally, I want it to happen automatically without th ...

javascriptcssresizezooming

Creating the main webpage's HTML through the Codebehind feature in ASP.Net using VB

Currently, I am immersed in a recreational project aimed at enhancing my understanding of vb.net and its interconnectivity. I welcome any suggestions that could potentially enhance the efficiency of my approach! My present focus involves extracting data f ...

jqueryasp.nethtmlvb.net

What is the best way to dynamically assign classes to a single <li> element in Meteor when an event occurs?

I'm a newcomer to the meteor framework and I'm attempting to create a project where clicking on the name within a <li> element changes the background color to yellow. When another <li> element is clicked, the previous one should rever ...

javascriptmongodbmeteormeteor-blaze

Tips for incorporating a glyphicon onto a bootstrap badge within an HTML document

Could someone help me with adding a glyphicon on top of a Bootstrap badge using CSS? I am looking to position the glyphicon at the top corner of the badge, similar to the example below: https://i.sstatic.net/skEhG.jpg Please see the code snippet provide ...

htmlcsstwitter-bootstrap

Place a div image on top of a form div

Currently, I have a simple form set up with the following HTML code: <div class="card mb-5 card-central-responsive" style="min-height: 579px;"> <div class="card-body"> <form #apkCreationForm="ngForm" class="mt-2" novalidate (ngSubmit ...

htmlcssbootstrap-4

Having trouble with custom button implementation on datatable

I am looking to enhance a specific column labeled "view services" by adding a custom button. My goal is to showcase multiple values within this column and enable users to perform a custom function upon clicking the button. Ideally, I'd like the button ...

javascriptphpajaxlaraveldatatable

Ajax is encountering an error in the fail function... Nevertheless, it is successfully completing its intended task

I have encountered a strange issue with my PHP/jQuery project. Upon calling the Ajax request, instead of triggering the 'done' function, it seems to be invoking the 'fail' function. Here is the current code snippet: $("#form").submit ...

phpjqueryajaxpost

Using multiple header tags in HTML

I have been tasked with developing a webpage featuring a prominent header at the top of the page. This header will include the navigation bar, logo, and website title. As the user begins to scroll, I want the header to transform into a compact version that ...

javascripthtmlcssheaderweb

What is the method for identifying which individual element is responsible for activating an event listener?

While working on a color picker project in JavaScript for practice, I encountered an issue. I needed the #screen element to display the selected color when clicked. How can I determine which color has been clicked and pass its value to the function so that ...

javascripthtmlcss

Steps to vertically shift an image downwards within a navigation bar using HTML and CSS

Currently, there is a fully functional navigation menu that can be toggled within a webpage. An image is also included in the navigation menu and positioned below the text. I would like to move the image to the very bottom of the navigation menu to remove ...

htmlcssvertical-alignment

Is it possible to fetch JSON data in PHP without having to encode it with json_encode()?

I've been trying my luck, but I'm curious if it's possible to retrieve JSON data if it's not encoded server-side with PHP. For instance, if I were to simply output some data like this: echo '{"subscriptions": [{"subscribe":"' ...

phpjqueryajaxjson

Utilize Angular 2 to search and filter information within a component by inputting a search term from another component

In my application, I have a Component named task-board which contains a table as shown below: <tr *ngFor="let task of tasks | taskFilter: searchText" > <td>{{ task.taskName }}</td> <td>{{ task.location }}</td> <td>{{ ta ...

javascriptangular

Creating a full-width header in React: A step-by-step guide

I'm facing an issue with the header I created - I want it to be 100% width of the screen, but when I decrease the screen size, it doesn't scale accordingly. Here's my current CSS: <Box style={{ backgroundColor: "RGB(46 ...

cssreactjsmaterial-ui