Ways to implement a transition effect when the hover state is deactivated or no longer present

After applying a transition to the header using the hover pseudo-class, I noticed that it abruptly snaps back to its original position when the hover effect is removed. Is there a way to smoothly return the header to its original position using the same cubic-bezier transition function in 0.5 seconds? Are there any specific pseudo-classes for handling hover-out events, or should I resort to using jQuery?

header{
  background:#000;
  padding:50px ;
  -webkit-transition: 0s padding-bottom;
}
header:hover{
  padding-bottom:90px;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
<header>
  </header>
javascriptjqueryhtmlcss

Answer №1

Make sure to apply all the styling related to transition to the header class rather than the :hover state. Give this code a try:

header {
    background: #000;
    padding: 50px ;
    -webkit-transition: 0.5s padding-bottom;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
    padding-bottom: 90px;
}
<header></header>

Answer №2

To apply the transition to the header element so that it retains its style even after hovering, you just need to adjust the transition property. Currently, the transition is only triggered on hover. See the code snippet below:

header {
  background: #000;
  padding: 50px;
  -webkit-transition: padding-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
  padding-bottom: 90px;
}
<header>
</header>

Answer №3

Make sure to also set the duration properties outside of the :hover style, similar to what you did with the transition property...

header{
  background:#000;
  padding:50px ;
  -webkit-transition: 0s padding-bottom;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
header:hover{
  padding-bottom:90px;
}
<header>
  </header>

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

Storing information in a session within a callback function using Node.js Express

Within the following code snippet, my goal is to retrieve user information from the database and store it in a session. However, I am encountering an issue where the data is not being properly saved into the session variable as expected. Could this be du ...

javascriptnode.jsmongodbexpress

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

I have an anchor element and I want to store and retrieve the object within it in this specific format. <a id ="test" data-val="{key1:val1,key1:val1}"> </a> When saved in this manner, fetching it with $("#test").data('val') returns ...

javascriptjqueryjsonhtml

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

javascriptjqueryhtml

Modify the Link's Color

How can I change the color of a link inside a DIV? The current code isn't working for me. <style type="text/css"> .someDiv { font-size:14px; color:#c62e16; } </style> <div id="someDiv"> <a href="http://www.s ...

css

What is the recommended way to retrieve a "NA" value when the radio button is not chosen or unavailable?

I want to assign the value "NA" when no radio button option is selected. Currently, I am using the following code snippet: $("input[name='question']:checked").siblings('label').text(). However, this code returns a blank value if any rad ...

htmljquery

Is it possible to incorporate both a file input and text input within a single form?

Is there a way to incorporate both a file input and text input into the same form? Appreciate your help in advance ...

html

Nuxt.js is throwing a TypeError because it is unable to access the 'minify' property since it is undefined

When I try to generate a Nuxt app using "npm run generate" or "npm run build", I encounter an issue where it throws a TypeError: Cannot read property 'minify' of undefined. Does anyone know how to solve this? TypeError: Cannot read property &apo ...

javascriptvue.jsnuxt.js

Guide on leveraging filter and map functions to modify an object

What is the process to adjust an existing object using map and filter? Two objects are provided below along with the desired output. let a = [ { a: "hi", b: 0 }, { a: "bye", b: 1 }, { a: "seeyou", b: 2 }, ]; let b = { hi ...

javascriptnode.jsarrays

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

There are no definitive answers to the questions regarding this issue. Some suggest stopping zoom altogether, while others recommend setting the width, which may not always solve the problem. I am working on a web application designed for mobile use with ...

javascriptcssmobile

Using setInterval together with jQuery to animate CSS based on changes in window size

I've been troubleshooting this issue and trying various methods, but despite it seeming logical, nothing is working. Any assistance would be greatly appreciated since I'm not very skilled in coding. My current challenge involves animating an obj ...

jquerycssanimationsetintervalwindow-resize

Display PHP array information in an HTML table

I am facing an issue with an array that contains a record set generated by the CodeIgniter model. When attempting to display these records in an HTML table using my view, the layout is not rendering correctly. Here is a snippet of my view: <html> & ...

htmlcsscodeigniter

Invoking a JavaScript function to retrieve an array of integers from a C# method for organizing columns in datatables.net

I have to admit that my JavaScript skills are not very strong. Currently, I am working on creating a table using datatables.net. The table is being populated by calling a generic handler, which in turn fetches data from the database using C#. This functio ...

c#javascriptjqueryasp.netdatatable

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

javascriptjqueryhtmlcssmicrosoft-edge

Utilizing a haml document

Looking to view a haml file from a Rails app in the browser. How can this be achieved? I have already initiated rails s and accessed it through http://localhost:3000 But how can I view the haml file alone? ...

htmlruby-on-railshaml

Setting up an object with a set expiration using NodeJS and Mongoose

Is there a way to create a temporary entity (like an ad) that will automatically expire after one month using NodeJS with MongoDB? An ideal comparison would be Instagram or Facebook Stories that only last for 24 hours. ...

javascriptnode.jsmongodbexpressweb

Tips for monitoring multiple values in a Vue 3 script setup

Within my code, I currently have a watcher set up like this (inside <script setup>): const form = reactive({ body: '', image: '' }) watch(() => form.image, () => { console.log(form.image) }) I am looking to enh ...

javascriptvue.jseventsvuejs3watch

Getting AJAX parameters from Angular in Node/Express Js

I am encountering an issue with my factory, which sends an ajax userId call to my node server. usersModel.getUser = function(userId){ return $http({ method: 'GET', url: 'http://localhost:3000/users/details', ...

javascriptajaxangularjsnode.js

Attempting to modify the key values within an object, however, it is mistakenly doubling the values instead

I'm encountering an issue when trying to update key values within an object. It seems to be adding duplicate values or combining all values together instead of assigning each name a specific language slug. I can't figure out where I'm going ...

javascriptvue.js

Steering clear of confusing mustache syntax in Jinja2 and jQuery template integration

I'm currently facing a challenge of integrating jQuery templates into Jinja2 templates. The issue arises because both frameworks, in their default setups, utilize the curly braces {{ and }} to denote expressions and literals, respectively. When I try ...

jqueryjinja2jquery-templates

Glistening R resize plotOutput

Attempting to resize a plotOutput using Shiny R. The plot in question can be viewed https://i.sstatic.net/fgzag.png This is the code snippet: #In ui: fluidRow( column(width = 12, h4("Diagrama Persistencia"), plotOutput("Dia ...

htmlcssrimageshiny