Apply a class when the page is loaded and remove the class when the mouse hovers

I am in the process of designing my portfolio website and I am interested in adding a class to my document on load, then changing or removing that class upon hover. To enhance my images, I am using lightgallery and CSS gram filters. In a previous attempt, I incorporated a list but found it didn't meet my requirements. Check out the previous code here

$("#gallery a").on({
  mouseenter : function() {
    $(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("mayfair");
  },
  mouseleave : function() {
    $(this).find(".nak-gallery-poster").removeClass("mayfair").addClass("inkwell");
  }
});

After modifying the jQuery code based on the suggestions from the previous code, I encountered issues. Any assistance would be greatly appreciated. View my CodePen

jqueryhtmlcssonmouseoverlightgallery

Answer №1

delete the specified code snippet

$lg.lightGallery();
  $lg.append(slide);
  $lg.data('lightGallery').destroy(true);
  $lg.lightGallery();

If you remove that segment from your CodePen, everything should function properly

It appears that you may have overlooked a plugin or inserted incorrect code

Answer №2

Opt for a simpler approach by adjusting your CSS code as demonstrated below:

.inkwell{
font-style: italic;
}
.inkwell:hover{
font-weight: bold
}

This method offers a straightforward solution without the need for jQuery, allowing you to include additional styling options such as background color based on your specific preferences.

Answer №3

Hey there! I took a look at your code on codepen and noticed that you forgot to include the mouseenter and other methods within the document.ready(function(){ ... }. I tried to leave a comment about it, but I can't because my rep points are below 50.

If you add those codes inside document.ready, everything should work correctly. The events aren't being registered because the script is running before the DOM is fully loaded.

Also, just an FYI, $lg is undefined as well, although others have already mentioned it. Just thought I'd bring it up again for good measure.

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

How can I ensure that my HTML form inputs are consistently displayed in the browser when using jQuery/AJAX and SQL queries without needing to

My goal is to show all textarea inputs in the browser even after a page refresh, as currently when I send data from homepage.php using jQuery/AJAX, it disappears upon refresh. The information is sent from homepage.php to data.php via the #textarea input an ...

phphtmlajax

Send the randomly generated data to a jQuery function

After receiving data from the controller, I am displaying it in a JSP page using the following code snippet: <li> <a class="groupList" href="#" onclick="myfunction(${item.id})"> ${item.name} </a> </li> My goal now ...

javascriptjqueryajax

Discrepancies in button padding across desktop and mobile platforms

I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically cent ...

htmlcss

problem encountered when attempting to fetch a value through ajax

Here is an updated version of the code for my preview problem. The goal is to send and retrieve a value using ajax, but I'm encountering issues with sending the value and getting ajax to work properly. This revised code is easier to test on different ...

phpjqueryajax

Switch out the HTML content within the JavaScript include

Here is the situation: <script type="text/javascript" src="http://xy.com/something.js"></script> This code snippet in my PHP/HTML file loads the entire something.js file. Inside that file, there are lines containing "document.write..." which ...

phpjavascripthtml

Deleting images based on their class through a loop

Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically ...

javascriptjquerycssimagehttp

How to close an iframe with javascript or jquery?

I am working with a series of iframes on my website. I am trying to figure out how to close the last iframe in the list when a button is clicked. Can someone please provide guidance on how to achieve this? Specifically, I am looking to execute a window.cl ...

javascriptjquery

When filling options within an optgroup in a selectbox, the data for each option may override one another

UPDATE: I made a change in my code: $('select[name=productSelect]').setOptions(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]); I updated it to: $('select[name=productSelect]').prepend(["All products|ALL", "Product ...

javascriptjavajqueryhtml

Deactivate jQuery hover functionality to address unintended consequences

I am facing an issue with the .hover() function. I have managed to temporarily disable it, but this has caused an unintended side effect that I need help fixing. Here is the link to my fiddle for reference: http://jsfiddle.net/sdPVG/7/ My goal is to disa ...

jqueryhoverjquery-animate

Are you handling a static .json file housed in the App_Data directory?

In my ASP.NET MVC 4 project, I have a .json file in the App_Data folder containing geographical data that needs to be loaded into D3.js. My current approach involves using jQuery to make an AJAX call to a Controller which returns a JsonResult. The JSON da ...

jqueryasp.netjsonasp.net-mvc-4

The jQuery included does not function properly in production mode and results in an error stating that it is not a function

After placing the jquery.placeholder.js file in the assets/javascripts folder, I successfully applied the function in my coffeescript file and it worked perfectly. $(document).ready -> $('input, textarea').placeholder(); However, when swit ...

javascriptjqueryruby-on-railscoffeescript

Issue with transmitting the value of <select> element to the controller

Here is the HTML code snippet: <input type="text" name="name" id="name" /> <input type="text" name="age" id="age" /> <select id="selectQualification"> <option value="Select Qualification">Select Qualification</optio ...

ajaxasp.net-mvcjquery

Utilizing d3 Charts in Angular 4 Framework

I need assistance with integrating a bar chart in an Angular 4 project, which includes HTML and TypeScript files as components. Can someone please provide guidance on this? The bar chart should show the increase in the number of employees each month, star ...

c#htmlangulartypescriptnvd3.js

I seem to be having trouble with my dropdown menu, can anyone help me figure out what I might be doing wrong

I'm new to web development and I'm trying to create a dropdown menu. The issue is that when I hover over a specific element, it takes up more space than expected. My goal is for it to appear below the "shop" element. I'm not sure where I&a ...

htmlcssdrop-down-menu

The POST variable comes up empty when making an AJAX request

I am currently attempting to utilize an AJAX call to POST the selected value from a dropdown list. However, I am encountering an issue where the POST variable is coming back empty once a value is chosen from the dropdown. In order to troubleshoot this pro ...

phpjqueryajax

What is the best way to center elements vertically within a table element?

I'm encountering some issues with my tables. I have created two tables, stacked one below the other, and I am trying to center the elements within them. However, I am facing difficulty in achieving vertical alignment and true centering, as shown in th ...

htmlreactjshtml-tablereact-bootstrap

Guide on exporting Excel data using Angular and TypeScript

My project involves managing a table of information that includes fields for FirstName, LastName, PhoneNumber, Age, and Date. I've created a function that allows me to export the data to an Excel file, but I only want to export specific fields like Fi ...

htmlcssangulartypescript

Material Design Lite and jQuery experiencing issues with smooth scrolling feature

I am facing an issue with using the .animate method of jQuery in conjunction with Google's Material Design Lite (MDL) framework. I implemented MDL to create a navigation bar, but encountered problems with achieving smooth scrolling. Here is an exampl ...

javascriptjqueryhtmlmaterial-design-liteconflicting-libraries

The issue with the JQuery Cookie Plugin is that it is unable to function properly due to the

Although I know there are many similar questions out there, please bear with me. I am not as proficient in JQuery as I am with HTML/CSS, and this is my first time using cookies. On my website, I have a green banner that should disappear when the user click ...

jquerycsswordpresscookies

Extracting tables from HTML files programmatically using C/C++

Currently, I am exploring new methods for extracting tables from HTML files. My current approach involves using tidy () to convert the HTML file into XHTML, and then utilizing rapidxml for XML parsing. During the parsing process, I specifically search for ...

c++htmlcxml-parsinghtml-parsing