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

The unit argument provided for Intl.NumberFormat() is not valid for electrical units such as volts and joules

After attempting to localize my web application, I have run into an issue with Intl.NumberFormat not working properly with electric units such as ampere, ohm, volt, and joule. The documentation provides examples and a list of available units. Despite fol ...

javascriptlocalization

Having issues displaying the & symbol in HTML from backend data

I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...

javascripthtmlnode.jsexpresshandlebars.js

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...

htmlcsscss-position

Use jQuery to swap out two div classes within a table cell (TD) if they are

Although I'm making progress, I must confess that jQuery and CSS are not my strong suits. The objective: To create a dynamic div within a table data cell for a calendar feature. The content of the div varies based on the date range input. A filled d ...

javascriptjqueryhtmlcss

Utilizing the setState method within an 'async function with arguments' for handling onClick events

In my next.js app, I have a file named "temp.js" located in the /pages directory. This is the code inside temp.js: import React from 'react'; import {Button} from '@mui/material'; class SomeClass extends React.Component{ state={ ...

javascriptreactjsnext.js

Choosing an element that does not have a particular string in its colon attribute name

In my code, I have multiple elements structured like this: <g transform="matrix"> <image xlink:href="data:image/png" width="48"> </g> <g transform="matrix"> <image xlink:href="specific" width="48"> </g> <g tran ...

htmlcsstypescriptwebdriverprotractor

Creating a bot that will only respond once when a user sends multiple photos simultaneously

I'm currently working on a Telegram bot using nodejs. I am utilizing the node-telegram-bot-api library and have implemented the on('photo') method to handle when a user sends a photo to my bot. However, I am facing an issue where if a user ...

javascriptnode.jsnpmtelegram-botnode-telegram-bot-api

Vertical scroll through a list of columns with a stationary header, while allowing both the list and the header to

Check out this JSFiddle example: https://jsfiddle.net/jefftg/1chmyppm/ The layout currently has orange header columns and white list rows that scroll together horizontally. However, the goal is to have the white list rows scroll vertically while keeping t ...

htmlcss

What is the best method to divide a string, enclose it within a span tag, and generate fresh code using jQuery?

Is there a way to separate multiple links, enclose them in a span tag, and then iterate through them to display them back within the a tag? I have managed to split all the dates into the dateArr array, but I need help looping through them to output each on ...

javascriptjquery

Exploring the Process of Setting Up a Temporary Endpoint in Express

Currently, I am working with the node.js framework express and my goal is to establish a temporary endpoint. This can either be one that automatically deletes itself after being visited once, or one that I can manually remove later on. Any assistance wou ...

javascriptnode.js

Discover the method for populating Select2 dropdown with AJAX-loaded results

I have a basic select2 box that displays a dropdown menu. Now, I am looking for the most effective method to refresh the dropdown menu every time the select menu is opened by using the results of an AJAX call. The ajax call will yield: <option value=1 ...

javascriptjqueryajaxjquery-select2

Attempting to troubleshoot and execute knex commands within the package.json file

At the moment, I am utilizing a knex project that was crafted by an individual on GitHub. I've encountered some issues with the package.json file, which should ideally simplify the execution of knex commands: { "name": "database", "version": "1. ...

javascriptjsonknex.js

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

What is the best way to send pg-promise's result back to the controller in Express?

While working with Ruby on Rails (RoR), I am familiar with the MVC (Model-View-Controller) concept. In this framework, the controller is responsible for receiving data from the model, processing it, and rendering the view. An example of this structure look ...

javascriptpostgresqlexpresspromisepg-promise

Performing subtraction on two arrays in Javascript

Is there a way to eliminate all duplicate elements from one array list that are also present in another array list using the .filter() method of ES6 javascript? I am open to solutions in jQuery as well, but they must be compatible with IE11+ and Chrome fo ...

javascriptjqueryecmascript-6

Hide elements in hidden divs until the page is fully loaded to reduce initial page

www.prismasites.com I am creating a unique world map by using SVG DIVs shaped like Continents. Upon clicking on a continent on the world map, it conceals the world map DIV and displays the respective continent DIV with SVG. I have successfully achieved ...

jqueryhtmlcssloadhidden

Tips for personalizing and adjusting the color scheme of a menu in ant design

I am currently working on a website using reactJs and ant design. However, I have encountered an issue with changing the color of a menu item when it is selected or hovered over. Here's the current menu: Menu Image I would like to change the white col ...

javascriptcssreactjsmenuitemantd

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

jquerycssjquery-ui

Is there a way to modify the value of a JavaScript object?

My React componentwillmount fetches data from an ExpressJS API using Axios and receives a JSON response, which is then converted to an object by Axios. [{"client_nick":"PlayTalk","connected_time_record":183710127},{"client_nick":"PlayTalk","connected_time ...

javascriptreactjsexpress

What is typically regarded as the optimal size for a full-screen background image?

What is the ideal image size for a full-screen background? I currently have an image that is 1920x1080 pixels, but I'm unsure if that's suitable for desktop screens. Can you provide guidance on this? ...

htmlcssbackgroundbackground-image