Having issues with jQuery's .hover function in Chrome

<div class="front_hover">
  <img class="bg_img" src="image.jpg" width="320px" height="400px"/>
    <div class="front_roll" style="display:none;">
        <!-- CONTENT HERE -->
    </div>
</div>

<script language="JavaScript" type="text/javascript">
jQuery(document).ready(function(){
    jQuery(".front_hover").hover(
    function () {
        jQuery(".front_roll", this).fadeIn(200);
    },
    function () {
        jQuery(".front_roll", this).fadeOut(200);
    });
});
</script>

Recently, I encountered an issue on my website where a jQuery function that displays content upon hovering stopped working in Chrome. Surprisingly, it still functions correctly on all other browsers.

You can view the live site at globalgeneration.co.uk

jqueryhtmlcssgoogle-chrome

Answer №1

Here is a response from the comments section of the original post:

The jQuery hover function appears to be functioning correctly as it should fade the element in and out.

The issue lies within the CSS positioning. To resolve this, adjust the rule for 

#content.front_content #front_top .front_roll
by adding position: absolute and removing the top and left properties.

Ensure that the parent has position: relative;, for example, 

.front_hover { position: relative; }

Answer №2

Encountered a similar issue with using $(menu).hover(funin,funout), where menu refers to <div><ul>... and involves the use of position:absolute.

Upon inspecting the behavior of event.target in funout, it was observed that in Firefox, it identifies the ul element, whereas in Chrome, it points to the div (with both cases having this as the div).

Although the exact cause remains unclear, resolving the issue was achieved by modifying it to 

$("ul", menu).hover(funin,funout)
: this adjustment ensures consistency in identifying the event.target for both browsers, suggesting potential differences in how Chrome handles the mouseleave event target.

Hope this helps! Best regards, JM2CW.

Answer №3

I gave your code a try and it seems to be functioning correctly ....

However, there is another approach worth considering, You could also try this method :

jQuery(".front_hover").on("hover",

function () {
//Add your actions here
});

Alternatively, you can explore this option :

    $("table tr").on({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});

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

Having trouble getting jQuery .click to trigger on a dynamically loaded button?

I'm having some trouble with my code. I have a list that loads dynamically with a button inside, and although I have set up jQuery to handle the click event, nothing is happening. Here's a snippet of the code: HTML: <ul id="cart"> ...

javascriptjqueryhtml

The ordering class is malfunctioning within the dropdown-menu of Bootstrap 5.2

I am having an issue with the order class when using a list-group inside a dropdown-menu in Bootstrap 5. I checked the documentation on ordering classes in Bootstrap 5 but I can't seem to get it to work inside the dropdown-menu. Here is a sample of t ...

htmldrop-down-menubootstrap-5

Establishing the default directory for uploading files in robot framework

In our web application, we have a feature that allows users to upload attachments, such as JPG, PDF, or any other file type. Currently, in order to upload these files, they must be stored in the directory: C:\Users\username. This is necessary for ...

pythonseleniumgoogle-chromeautomationrobotframework

Convert a two-column layout on the web into a single-column layout for mobile devices, featuring dynamic

Is there a way to style this diagram with CSS that will work on IE11 and all major browsers? It seems like Flexbox doesn't support dynamic height. Do I need separate left and right columns for larger viewports and no columns for smaller viewports? ...

javascripthtmlcssgridflexbox

Determine the number of input files in HTML5 when there is a change

I am working on a project that requires using the HTML5 File API to determine the number of files selected in an input file element and then displaying this count in another element. Here is the HTML code: <div class="form-row"> <label>Ma ...

jqueryhtml

How can I retrieve the class's name rather than its content?

When looking to retrieve elements by their class name in JavaScript, document.getElementsByClassName() is a helpful method. However, is there a built-in JavaScript function that can return the name of the class itself? For example: var classElement ...

javascripthtmlclassparametersgetelementsbyclassname

Adjust the width of the <li> element based on the quantity of its children

If the number of list items can be changed dynamically, how can I adjust the width of each item so that the total width is always 100%? Here is an example code snippet: <nav> <ul> <li>A</li> <li>B</li> &l ...

htmlcss

keep the color of the link after clicking until a different link is clicked

At the bottom of every post on my website, there are 3 buttons: "Written By", "Related Post," and "In This Category": SoCatchy! I'm looking to have each button change color when clicked, and stay that way until another link is clicked. Here is the c ...

jqueryhtmlcsscolors

Unable to change the color of the tab indicator

Hello, I am currently using materializecss in conjunction with Angular 6. Just to clarify, I am solely utilizing the materializecss library and not ng2-materialize. My issue arises when attempting to customize the tab indicator background color by modifyi ...

cssangularmaterialize

tips for stopping links from affecting their descendent styles

During my website redevelopment, I want to include simple links in the menu for users to easily open them in new tabs. Currently, a menu item looks like this: <li class='menu-left-row' id='messages' onclick=\"javascript:showscr ...

javascriptjqueryhtmlcss

The issue with the jQuery click event arises when utilizing the "Module Pattern"

Exploring the Module Pattern as described by Chris Coyyer here, I, an intermediate front-end JS developer, have encountered a problem. Specifically, when attempting to utilize a jQuery selector stored in the settings object, I am unable to trigger a click ...

javascriptjquerymodule

Searching for elements using jQuery's "attribute-based" selector

Check out this straightforward example on jsfiddle: HTML: <input type="text"/> <input type="text" value="aaa"/> JS: $("input:first").val("aaa"); alert($("input[value='aaa']").length);​ Have you ever wondered why Chrome and IE g ...

javascriptjqueryjquery-selectors

PHP failing to deliver response data in AJAX request

I'm really stumped on this one. I can't seem to figure out why this code isn't working, even though everything seems right. Here's what I have: On my basic HTML page, I have a JQuery script that makes an AJAX call to a PHP script in th ...

phpjqueryajax

Changing the background color of a table cell using PHP based on data retrieved from a database table

Currently, I am developing an attendance system where users can mark their attendance. Additionally, the page contains a calendar displaying the current month. My objective is to modify the color of table cells based on the attendance status: 1. Green fo ...

phpjquerymysql

The iframe is not displaying the most recent version of the HTML page

I am facing an issue where an iframe linked to an HTML page is not updating on the main page even after I edit the linked HTML page. <div style="position: fixed; left:151px; top:232px;height:542px;width:826px;overflow:auto;background-color:#ff5a93& ...

htmlcssiframe

Tips on customizing the h:selectBooleanCheckbox border styling

Is there a way to apply a red border to the <h:selectBooleanCheckbox> element? I attempted to do so using the following code, but unfortunately, no border is displayed. <h:selectBooleanCheckbox style="border: 1px solid red;" /> ...

htmlcssjsf

Spinner displayed upon task completion

Currently, I am developing a project using Spring Boot. I would like to display a spinner on my page to indicate that a task involving heavy calculations is in progress. Even though the page may take up to 5 minutes to load, my spinner only appears for t ...

javascriptjqueryajax

Make CKEDITOR cease the unwrapping of blocks

Imagine I have the following block markup: <div class="block"> <a href="/"> <div class="divInside"></div> <img src="/bla" /> <p>Paragraph</p> </a> </div> HTML5: explain ...

javascriptjqueryhtmlckeditor

Restricting Checkbox Choices with JavaScript by Leveraging the forEach Function

I am developing a checklist application that limits the user to selecting a maximum of three checkboxes. I have implemented a function to prevent users from checking more than three boxes, but it is not working as expected. The function detects when an ite ...

javascripthtmlforms

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

javascripthtmlvue.js