Hover effect for child element not activating CSS3 Transition

I need my list item to activate a css3 transition on its child element .pusher when it is hovered over. I usually achieve this using JS, but I want to try implementing it with css3 transitions. After reading some other questions on SO, I attempted to do it myself, yet it's not functioning as expected:

#sidebar ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
#sidebar ul li {
    padding: 20px;
    position: relative;
    list-style: none;
    border-bottom: 1px solid #4a4a4a;
    cursor: pointer;
    -webkit-transition: max-width 0.5s ease;
    transition: max-width 0.5s ease;
}
#sidebar ul li a {
    color: #fff;
    z-index: 5;
    position: relative;
}
#sidebar ul li a:hover {
    text-decoration: none;
}
#sidebar ul li:hover > .pusher {
    max-width: 100px;
    height: 100%;
    background: #383838;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#sidebar ul li:first-child {
    border-top: 1px solid #4a4a4a;
}

The Pusher element is actually added to li dynamically using JS, but I don't believe this should be causing the problem? (edit: this doesn't seem to be the issue)

See the fiddle here: http://jsfiddle.net/8KpQW/

htmlcsscss-transitions

Answer №1

The width of .pusher has not been defined, only a max-width is specified, so it does not have a set width.

You can try the following solution:

JSFiddle Demo

CSS Snippet


.pusher {
    width: 0;
    transition: width 0.5s ease;
}

.sidebar ul li:hover .pusher {
    width: 100px;
    height: 100%;
    background: #383838;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

Answer №2

This snippet of code resolved the issue I was experiencing:

 #sidebar {
  height: 100%;
  margin-top: 74px;
  background: #303030;
  color: #fff;
}
#sidebar ul {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#sidebar ul li {
  padding: 20px;
  position: relative;
  list-style: none;
  border-bottom: 1px solid #4a4a4a;
  cursor: pointer;
}
#sidebar ul li a {
  color: #fff;
  z-index: 5;
  position: relative;
}
#sidebar ul li a:hover {
  text-decoration: none;
}
#sidebar ul li .pusher {
  height: 100%;
  width: 0px;
  background: #383838;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}
#sidebar ul li:hover > .pusher {
  width: 100%;
}

It's important to note that the transition property must be applied to the actual element being animated, not the hover trigger element. The hover state simply needs to include the property value at which the animation will conclude.

Here is a fiddle showcasing this solution: http://jsfiddle.net/8KpQW/3/

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

I'm struggling to find the correct media query to fix the problem with resizing my window

Looking to create a layout where two large icons are displayed side by side horizontally, but then switch to a vertical layout when the window size is reduced (such as on a mobile phone). I know that media queries are necessary for this, but I am unsure of ...

cssmedia-queries

Troubleshooting a mysterious anomaly with a jQuery UI button

Would like to achieve something similar to this: http://jqueryui.com/demos/button/#icons When trying to replicate it, http://jsfiddle.net/p5PzU/1/ Why is the height so small? I expected a square shape but am getting a rectangle instead. What could be c ...

javascriptjqueryhtmlcssjquery-ui

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

Preventing Height Stretch in CSS Flex-Wrap: A Guide

Is there a way to eliminate the large gaps between box3, box1 and box4, box6? How can we ensure each box adjusts its height dynamically? .wrap { display: flex; align-items: baseline; align-content:flex-start; justify-content: space-between; fl ...

cssflexbox

Calculate the total count of responses within the JSON data returned

Hello all, I need some guidance on calculating the total number of responses in a JSON response that adhere to a specific rule using JavaScript. Here is the JSON response that I am discussing: [ { "InvoiceNumber":"INV0319", "InvoiceOrd ...

javascripthtmljsonapirest

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

javascriptcsshtml

Creating a Circular Design with a Centered Line and Text Above and Below using Qualtrics (HTML/CSS/Java)

My knowledge of creating shapes and using these programming languages is limited. I am currently working on a survey in Qualtrics and I need to insert text into circular shapes. Creating one circle was straightforward, thanks to some helpful discussions ...

javahtmlcssqualtrics

How Can I Utilize a URL Parameter Twice to Execute SQL Queries in Two asp.DataLists on a Single Page?

I've been trying everything, but I just can't seem to get one query to function properly. My goal is to retrieve information from the SQL Server database in two separate queries - one for album names (based on URL parameter) and another for song ...

c#htmlsql-serverselect

Tips for altering the scrolling rate of a container

I am trying to adjust the scroll speed of specific divs among a group of 5 divs. I came across a solution that changes the scroll speed for the entire document: http://jsfiddle.net/36dp03ur/ However, what I really need is a scenario like this: <div i ...

javascriptjqueryhtmlcss

What is the best way to incorporate a range of details into a div using only jQuery, all while avoiding the use of data-

I'm struggling to find a concise way to explain this, so please bear with me. The information I'm sharing here is all just for example purposes and may sound strange. I have been working on creating a character select page where clicking on a cha ...

javascriptjqueryhtml

Header element not keeping the navbar at the bottom

My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down. Currently, both the header and navigation are set t ...

htmlcss

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

What could be causing my jQuery animation to lack smoothness?

I am experiencing an issue where, after a delay, my element completely jumps across the screen to its new position when I animate its height. Strangely, this problem only occurs when using pixel values and not percentages. Unfortunately, I need to use pi ...

jqueryhtmlanimation

Converting a PHP array to a JavaScript array causes an issue of undefined variable when attempting to access a PHP array that has

I've been searching through other questions without finding the answer, so I'm reaching out for help with my specific issue. My problem is transferring a php array to a javascript array. In my code editor (phpStorm), I'm getting an error st ...

javascriptphpjqueryhtmllaravel

PHP script redirects to its own URL successfully, but the functionality fails when triggered by CRON

I am facing an issue with a program that calls itself iteratively. redirect($_SERVER["PHP_SELF"]); function redirect($url,$seconds=0) { $html="<html><head><meta http-equiv='refresh' content='$seconds; URL=$url'>< ...

phphtmlcron

Difficulty in arranging DIVs on a flat surface

As a user running Win XP with Firefox, IE, and Google Chrome browsers, I'm encountering an issue where I can't seem to align two DIVs on the same horizontal plane. My goal is to have the left div occupy 24% of the screen width while the right div ...

htmlcss

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

javascriptcssajaxinternet-explorer

The onload event for windows does not fire

I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...

javascriptjqueryasp.netcsstabs

How can I close the colorbox and open a new regular window when clicking a hyperlink?

Hey there, I'm currently facing an issue with closing a colorbox when clicking "Click here to return to our website" and opening a regular browser window instead. You can check out the problem on this page: On the left navigation bar at the bottom i ...

jqueryhtmlcolorbox