Why isn't the show/hide feature in Jquery functioning properly?

I have a div that needs to be displayed after hovering over another element. These elements are not within the same div. The popup info should appear when an icon with the class .option_36_124 is hovered over.

$(".option_36_124").hover(function(){
  $('.popupinfo').show();
}, function(){
  $('.popupinfo').hide();
});
.popupinfo {
  background: black;
  color: white;
  top: 250px;
  right: 527px;
  position: absolute;
  padding: 10px;
  width: 250px;
  display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

javascriptjqueryhtmlcss

Answer №1

$( document ).ready(function() {
$(".option_36_124").hover(function(){
    $('.poupinfo').fadeIn();
},function(){
    $('.poupinfo').fadeOut();
});
});

The solution can be found right here.

Answer №2

It seems like your HTML structure needs a bit of adjustment. The icon and the content should not be parent-child related but siblings, to ensure the icon is always visible and not dependent on the content. Additionally, it appears that you are targeting an erroneous (non-existing) class in your .show() and .hide() functions. Here's a revised version for you:

$(".option_36_124").hover(function(){
    $('.product_info').show();
},function(){
    $('.product_info').hide();
});
.product_info{
    background: black;
    color: white;
    top: 150px;
    right: 527px;
    position: absolute;
    padding: 10px;
    width: 250px;
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<i class="fa fa-info-circle option_36_124">icon (hover me)</i>
<span class="product_info">content</span>

Answer №3

This code snippet demonstrates how to show and hide an information popup when hovering over a specific element.

$(".option_36_124").hover(function() {
  $('.popup-info').show();
}, function() {
  $('.popup-info').hide();
});
.popup-info {
  background: black;
  color: white;
  top: 250px;
  right: 527px;
  position: absolute;
  padding: 10px;
  width: 250px;
  display: none;
  text-align: right;
  top:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

<div class="popup-info">Hello! I am now visible </div>

Answer №4

When it comes to designing without relying on jQuery or any scripts, my preference is to utilize :pseudo elements. By combining :hover and :after, you can achieve the desired result without the need for any scripting!

This approach allows for a purely CSS3 solution :)

   .fa-info-circle:hover::after {
      content: 'hey im popup info!';
      background: black;
      color: white;
      position: absolute;
      padding: 10px;
      width: 250px;
      left: 30px;
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="product_info"><i class="fa fa-info-circle option_36_124"></i></span>

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

Trouble with Chakra UI loading Images from local sources

I'm running into issues when trying to load local images using the Chakra UI library in combination with Next.js. <Image src="./homepage/footer/Black.svg" /> Here is the current folder structure: When checking my console, I see the f ...

javascriptreactjsnext.jschakra-ui

Enhanced JavaScript Regex for date and time matching with specific keywords, focusing on identifying days with missing first digit

I have a specific regular expression that I am using: https://regex101.com/r/fBq3Es/1 (audiência|sessão virtual)(?:.(?!audiência|sessão virtual|até))*([1-2][0-9]|3[0-1]|0?[1-9])\s*de\s*([^\s]+)\s*de\s*((19|20)?\d\d) ...

javascriptregex

Utilize AJAX to invoke a PHP function through JavaScript

I am trying to call a PHP function from Javascript without using jQuery. The PHP function I want to call is: <?php function helloworld() { echo 'Hello Ashish Srivastava'; } ?> It is located in the hello.php file. My Javascript code ...

javascriptphpajax

ERB failing to interpret Ruby script

Hello, my index.html.erb file looks like this: <h1>Bookmarks</h1> t <% @books.each do |b| %> <div class="book"> e <div class="row"> s <div class="col-md-1"> t <p class="rank-this ...

htmlruby-on-railsrubyerb

Populate DataTable with HTML content by fetching it through Ajax requests

My goal is to dynamically load the HTML returned from a controller into a div when a user clicks on a row in a table. Check out my code snippet below: // Add event listener for opening and closing details jQuery('#exRowTable tbody').on ...

javascriptjqueryasp.netajaxrazor

I'm looking for a skilled CSS spinner creator. Can anyone recommend one?

Can anyone recommend a good online application for creating CSS spinners? I've been searching and only found one on David Walsh's blog, but it only has one available. Any suggestions? ...

ajaxcssspinnerloading

How can we choose the best set of samples to accurately represent a curve with a fixed number of samples?

Background Exploring my passion project involves analyzing an RC aircraft control input device. In the realm of this hobby, there is a common feature known as "stick expo" where control sticks vary in sensitivity based on their position. As I delve into t ...

javascriptc++optimizationstatisticscurve-fitting

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

I came across this snippet of code while working with ng-repeat: <div ng-show="parameter == 'MyTESTtext'">{{parameter}}</div> Here, parameter represents a string variable in the $scope... I started exploring if it was possible to c ...

javascriptangularjs

Discovering a specific JSON object member by its corresponding string value

Let's consider a JSON file with information about books stored in it: { "store": { "book": [ { "category": "reference", "author": "Nigel Rees", "title": "Sayings of the Century", "price": 8.95 }, { "category": "fiction", "autho ...

jqueryjsonpgetjsonjson

A step-by-step guide on creating a unique ticket number sequence in PHP

Looking to create a unique ticket number sequence using PHP? Here's the given sequence: 1-W1 (mandatory). 2-Date (yy-dd-mm) format. 3-001-999 (resets daily from 001). Check out this example: e.g. - W120200101001 I've started the code below, b ...

javascriptphp

Having difficulty establishing a connection between my node.js application and the database

I've been struggling to establish a connection between my application and the database. Despite attempting the code below, my models are still not being recognized. const MongoClient = require('mongodb').MongoClient; const assert = require(& ...

javascriptnode.jsmongodb

Having trouble installing Angular 4 with npm?

After installing Angular, I encountered an error when trying to use the command line "ng -v". Please refer to the attached jpeg file. My node version is 6.10.3. Does anyone have a solution? ...

javascriptangularnpm

What is the best way to implement a CSS Style specifically for a glyphicon icon when it is in keyboard focus?

I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page. However, an ...

javascripthtmlcss

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

The texture failed to load onto the 3D object during the mapping process

Issues with loading texture into the 3D ring model, although it works fine for other objects. No compile errors detected. Proper lighting conditions are set up but the color of the 3D model appears grey/black. The texture loads correctly for other object ...

javascriptthree.js

Obtain offspring from a parent element using jQuery

$(document).ready(function() { $.ajax({ type: "POST", url: 'some/url', data: { 'name':'myname' }, success: function (result) { var result = ["st ...

javascriptjqueryhtmlajaxgetelementbyid

An alternative way to adjust font size without having control over the HTML code

Is there a way to adjust the font size in a web page when only the div or iFrame is editable, not the actual HTML content? Our website allows users to upload their own ebooks, resulting in uncontrolled and complex HTML content for each chapter. We want to ...

javascriptjqueryhtmlfont-size

I'm having trouble pinpointing the issue in my code

For some reason, the first button in the div in this code is not working on HTML files. I have tried multiple JavaScript and HTML validators but none of them seem to work. Surprisingly, it works fine on codecademy.com and w3schools.com, but the issue persi ...

javascripthtml

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

javascripthtmlcssapache.htaccess

MongoSearch: A Geo-Targeted Search Engine tailored to your needs

For my new app project, I am using MongoDB, Express, JS, and Node to create a platform similar to Yelp. After some research, I discovered how to search for multiple fields within a campus schema (including campuses, restaurants, barbershops, and names). No ...

javascriptnode.jsmongodbexpress