Halt hovering effect after a set duration using CSS or Vanilla JavaScript

Looking for a way to create a hover effect that lasts for a specific duration before stopping. I want the background to appear for just 1 second, even if the mouse remains hovering. Preferably using CSS or JavaScript only, without jQuery.

To see my current code, check out this JSFiddle.

#social {
    min-width: 350px;
    font-size: 11pt;
    text-align: center;
    width: 60%;
    margin: auto;
    word-spacing: 25pt;
}
#social a {
    padding: 4px 9px 4px 9px;
    color: #999999;
    text-decoration: none;
}
#social a:hover {
    color: transparent;
    background: red;
}
javascriptcsshover

Answer №1

To incorporate engaging animations into your website, you can leverage CSS animation techniques. Here is an example:

#social {
  min-width: 350px;
  font-size: 11pt;
  text-align: center;
  width: 60%;
  margin: auto;
  margin-top: 3vh;
  word-spacing: 25pt;
}

#social a {
  padding: 4px 9px 4px 9px;
  color: #999999;
  text-decoration: none;
}

#social a:hover {
  animation-name: background;
  animation-duration: 1s;
}

@keyframes background {
  from {
    background-color: transparent;
    color: #999;
  }
  to {
    background-color: red;
    color: white;
  }
}
<div id="social">
  <a href="#">showreel</a>
  <a href="#">linkedin</a>
  <a href="#">instagram</a>
  <a href="#">vscocam</a>
</div>

Answer №2

#social {
    min-width: 350px;
    font-size: 11pt;
    text-align: center;
    width: 60%;
    margin: auto;
    margin-top: 3vh;
    word-spacing: 25pt;
}
#social a {
    padding: 4px 9px 4px 9px;
    color: #999999;
    text-decoration: none;
}
#social a:hover {
    color: transparent;
animation: backg 5s;
-webkit-animation: backg 5s;
}

 @keyframes backg
    {
      0%   {background: red;}
      50%  {background: red;}
      100% {background: white;}
    }

    @-webkit-keyframes backg 
     {
      0%   {background: red;}
      50%  {background: red;}
      100% {background: white;}
    }
<div id="social">
  <a href="#">showreel</a>
  <a href="#">linkedin</a>
  <a href="#">instagram</a>
  <a href="#">vscocam</a>
</div>

Answer №3

To achieve this effect, you can utilize an animation along with keyframes. The animation code would resemble the following:

@keyframes hover-effect {
    0% {
        background-color: transparent;
        color: #999999;
    }

    1% {
        color: transparent;
        background: red;
    }

    100% {
        color: transparent;
        background: red;
    }
}

.class:hover {
  animation: hover-effect 1s ease;
}

For an updated version, please refer to the following jsfiddle link: https://jsfiddle.net/gk3nfmnj/1/

Answer №4

To achieve this effect, you can utilize the power of css animation.

Here is an example:

#social {
  min-width: 350px;
  font-size: 11pt;
  text-align: center;
  width: 60%;
  margin: auto;
  margin-top: 3vh;
  word-spacing: 25pt;
}

#social a {
  padding: 4px 9px 4px 9px;
  color: #999999;
  text-decoration: none;
}

#social a:hover {
  animation: hover 2s;
}

@keyframes hover {
  from {
    background: transparent;
  }
  to {
    background: red;
  }
}
<div id="social">
  <a href="#">showreel</a>
  <a href="#">linkedin</a>
  <a href="#">instagram</a>
  <a href="#">vscocam</a>
</div>

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

what is the best way to display a chosen value in a dropdown menu using jQuery?

How can I display a value from a database in a select option? This code is written in PHP, JSON, AJAX, and JQUERY. $(document).on('click', '.edit_data', function () { var shop_id = $(this).attr("id"); $.ajax({ url: "&l ...

javascriptphpjquerymysqlajax

There appears to be an issue with Mongoose Unique not functioning properly, as it is allowing

Below is the complete code snippet I am using to validate user data: import { Schema, model } from 'mongoose'; import { User } from './user.interface'; const userSchema = new Schema<User>({ id: { type: Number, required: ...

javascriptnode.jsexpressmongoose

Tips on preserving type safety after compiling TypeScript to JavaScript

TS code : function myFunction(value:number) { console.log(value); } JS code, post-compilation: function myFunction(value) { console.log(value); } Are there methods to uphold type safety even after the conversion from TypeScript to JavaScript? ...

javascripttypescripttype-safety

Discovering the property name of an object in Angular using $watch

Is there a way to monitor an object for changes in any of its properties, and retrieve the name of the property that changed (excluding newValue and oldValue)? Can this be accomplished? ...

javascriptangularjs

Flex mode allows for responsive row details in ngx-datatable

Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loade ...

cssangularngx-datatable

Unable to detect click event in Vue devtools

My component is supposed to detect if a menu item has a submenu and toggle its visibility accordingly. However, when I click on it, nothing happens and no event is registered in the Vue devtools. Despite following the Vue docs closely and using the same sy ...

javascriptvue.js

JavaScript and PHP are successfully displaying a success message despite the data not being saved to the database

I recently added a new feature to my website where users can submit a form using Javascript without having to reload or refresh the page. This allows for a seamless experience and displays success messages instantly. However, being a newcomer to Javascript ...

javascriptphpajax

Redux does not have the capability to insert an object into an array

I'm currently learning about redux and I've encountered an issue trying to add multiple objects into the initialState array. I attempted using the push() method, but it isn't working as expected. The submitter value is being passed to my act ...

javascriptreactjsarraysreduxpush

Verifying credentials using Chromium pop-up window with Playwright

In my current project, I am using Playwright to automate the configuration of multiple devices. However, I have encountered a challenge with certain models that require authentication through a popup dialog box in Chrome. https://i.stack.imgur.com/jgnYM.p ...

javascriptjquerynode.jschromiumplaywright

Placing a new item following each occurrence of 'X' in React components

Currently, I am working with a React component that uses Bootstrap's col col-md-4 styles to render a list of items in three columns. However, I am facing an issue where I need to add a clearfix div after every third element to ensure proper display of ...

javascriptjquerytwitter-bootstrapreactjs

Creating a customized image modal in ReactJS that incorporates a dynamic slideshow feature using the

I am attempting to incorporate an image lightbox into my React application: https://www.w3schools.com/howto/howto_js_lightbox.asp Here is the link to the CodeSandbox where I have tried implementing it: https://codesandbox.io/s/reactjs-practice-vbxwt ...

javascriptreactjslightboximage-gallery

Utilizing Cookies in an AJAX Request for Cross-Domain Communication with Pure Javascript

I am in the process of developing an Analytics application and I'm seeking a method to uniquely identify each user's device. Currently, my approach involves generating a "cookie" from the server side to track all page clicks and interactions thro ...

javascriptajaxjsoncross-domaincors

Contrasting the purpose of a function in pure JavaScript versus a function within the scope of an Angular controller

Could someone clarify the distinction between declaring these two functions in an angular controller? function demo() { }; scope.demo = function() { }; Are these two functions similar in perf ...

javascriptangularjsfunctionangularjs-controllerdifference

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

Trigger jQuery Waypoints Only Once

Utilizing , I am seeking to trigger a specific action when the user scrolls down to the section marked with the class div1. However, the action should only occur once and not repeatedly each time the user reaches that point. — just once $('.div1&ap ...

javascriptjqueryjquery-waypoints

The Vue template syntax utilizes double curly braces for incrementing values within must

Embarked on learning Vue.js recently and I am intrigued by the unusual behavior in my simple code. I cannot seem to figure out what is going wrong. I am attempting to increment a counter inside mustache syntax, but something strange is happening with this ...

javascriptvue.js

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

Checking for Internet Connectivity in Mobile HTML5

Is it possible to check for internet connectivity on a mobile device? Can websockets be utilized to ping a server and determine if the connection is available? I am feeling frustrated as I believed there was a ping function in websockets for client-side u ...

javascripthtmlmobilewebsocketconnection

Avoid updating the callback in every update by using React's useEffect

Is there a way to avoid continuously updating a callback in useEffect?. For instance, I am subscribed to an event with geofire, which listens for changes and receives locations. I want to update my state without subscribing every time there is an update. ...

javascriptreactjsuse-effectgeofire

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

htmlcsstwitter-bootstrap