Tips on cycling through hovered elements in a specific class periodically

I'm looking to add a hover animation to certain elements after a specific time, but I haven't been able to make it work correctly.

Here's my attempted solution:

CODE

$(document).ready(function(){
    function setHover() {
        $('.header_Icons_Main').each(function(i, obj) {
            $(this).mouseenter()
        });
    }
    setInterval(setHover, 1000);
});

Any suggestions or help would be greatly appreciated. Thank you!

Answer №1

If you are attempting to activate a CSS hover effect (styles defined by something like .header_Icons_Main:hover), it seems that using JavaScript to do so is not possible. Refer to this answer for more information.

Instead, you can create a class that includes the desired hover styles and dynamically add or remove this class using JS.

function setHover() {
    $('.header_Icons_Main').addClass('hover');
}

Take a look at this jsfiddle.

Edit: Upon understanding your updated goal of sequentially triggering hover states on each item, I have made adjustments to the fiddle. View the updated version here.

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

Transform the scrollbar appearance on hover. Implement this feature using React and CSS with Material-UI

Within my React app, I am facing an issue with a scrollbar appearing in multiple lists. The global CSS being used within Material-UI is as follows: MuiCssBaseline: { ...theme.overrides?.MuiCssBaseline, '@global': { '@font-fa ...

Tips for organizing the contents of nested items in alignment

Here's a layout I've created, you can view it on CodePen. .parent { display: flex; justify-content: space-between; } .left { flex-grow: 1; flex-basis: 0; background-color: blue; } .right { background-color: red; flex-grow ...

Once the content of a page is retrieved through an AJAX request, I am able to access and select tag elements, however, I am unable to

After making an AJAX request, I received an HTML page $.ajax({ async: true, method: 'GET', url: linkPage, // cache: true, success: function (data) { console.log(data); } }); The received data is ...

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

"Experience the power of Vue.js 3 and vue-router as the @click event seamlessly refreshes the entire

Just getting started with Vue and I'm trying to figure out how to toggle the menu open/close on mobile navigation without causing the whole page to reload. Any suggestions on how to prevent that? Here's my code: <router-link to="/ " @click="t ...

Mongoose failing to retrieve data from MongoDB

In my code, I am utilizing data from the database: Assignment and the Collection: todolist. The code is designed to interact with MongoDB in order to add, delete, or list the JSON in the collection. To properly explain the issue, I will first showcase the ...

Using XSLT to format HTML tables for printing

In my current project, I am developing an XSLT that retrieves a list of items from an XML file and generates an HTML table for each item. The issue I am facing is that when I attempt to print the document, the tables at the end of the page get cut off and ...

React - The previous condition is maintained when selected

A few days back, I encountered a perplexing issue and sought help by posting a question regarding obtaining an index of values. To my relief, I received a reliable answer that enabled me to successfully tweak my existing code. One problem that arose was w ...

Is it possible to specifically focus on Google Chrome?

Can anyone help me with positioning the update button on www.euroworker.no/order? The button works fine in Firefox and Internet Explorer, but it's not displaying correctly in Chrome or Safari. I've tried targeting Safari and Chrome specifically, ...

The jQuery mobile tap event triggers the vclick event

I have been developing a jQuery mobile application that needs to be functional on both mobile devices and PCs. To detect finger events, I am utilizing the jQuery Finger plugin (): $('body').on('tap', 'image', function(e) { ...

The PHP script is not receiving the post parameters sent in the ajax request

Help Needed jQuery.ajax({ url: 'PHPdocs/appsearch.php', data: {term:'blub'}, type: "POST", async: true, data: "text", succes ...

Introducing a fresh Backbone object attribute that points to an existing instance property

While working with Backbone/Marionette, I came across something unusual. When I create a new instance of a view with a new collection property and then create another instance of the same view, it seems that the collection property of the second view point ...

Changing CSS styles dynamically using PHP

After stumbling upon a customizer live preview layout picker, I have finally found what I've been searching for – a live layout changer for WordPress. This solution works like a charm, but I'm wondering if there is a more efficient way to write ...

There seems to be an issue with declaring Gulp Open

Here is the code snippet for my `open.js` task: import gulp from 'gulp'; import gulpOpen from 'gulp-open'; gulp.task('open', () => { // doesn't work with `function()` either. const options = { uri: 'local ...

Showing two divs on top of an image inside a container

Hey there, I apologize for the messy title but I've been searching for an answer for a couple of hours now. <div id="lightbox"> <img src="blabla.png"> <div href="#" id="next" onClick="next(1)"></div> <div href=" ...

Prevent further execution upon callback in an AJAX request by stopping the click event function

When the function myClick() is called within itself instead of myLoad() on the first click, it leads to double execution of myClick() on the second click. => This results in two consecutive executions of the click event for #myBtn with just one click. ...

The JavaScript onunload event handler

Despite all my research, I'm still unable to solve this issue. My task involves executing some functions when a user leaves my page. To achieve this, I utilized window.onbeforeunload to warn the user about leaving the page and window.onunload to initi ...

Troubleshooting issue with jQuery datepicker not triggering onselect event

Query Function: $(function() { $("#iDate").datepicker({ dateFormat: 'dd MM yy', beforeShowDay: unavailable onSelect: function (dateText, inst) { $('#frmDate').submit(); } }); }); HTML ...

Exploring the dynamic duo of MongoDB and GridFS

We currently manage a large-scale project that accommodates thousands of users daily. Our database system is MySQL, but we are considering transitioning to MongoDB along with GridFS. Is it feasible to utilize MongoDB and GridFS for projects on this scale? ...

Exploring the nuanced contrast between .has() and :has() in jQuery

When utilizing the child selector > in conjunction with jQuery's "has" function, the two variations exhibit contrasting behaviors. Consider this HTML snippet: <div> <span>Text</span> </div> Now: $("div:has(>span)"); ...