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

Guidelines for comparing two distinct dates using jQuery

const currentDate = $("#date").text(); // the current date is set as a variable 01/06/2017 // Another date is declared as a variable let startDate = '01 / 06 / 2017'; if (currentDate == startDate) {} if (currentDate < startDate) {} <script ...

jqueryhtml

Microsoft Edge and Google Fonts display strong and distinctive lettering

When using Microsoft Edge on Windows 10, all text appears with bold UTF-8 characters: I'm unsure of what the issue is. Is there a solution available? ...

htmlcssfontsmicrosoft-edge

Show a collection of files in a table format

Here is the current code I have: index.html <!DOCTYPE html> <html> ... </form> </div> </body> </html> And here is my code.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } ...

javascripthtmlweb-applicationsgoogle-apps-scriptgoogle-drive-api

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

Could someone please clarify why the data I input is not appearing in my hbs file?

I've been facing an issue where I am unable to send data from my main.js file to bookings.hbs file, although it works perfectly fine when sending the same data to index.hbs file. Can someone help me identify where the error might be occurring? App.js ...

htmlnode.jsmongodbexpresshbs

How can I ensure that my style.scss file effectively interacts with my stylesheet by including imports for "variables", "globals", and "header"?

Currently, I am in the process of learning how to utilize Sass and JavaScript through VS Code. Within my project structure, I have an "app" folder where my js folder resides containing script.js, as well as a scss folder holding _globals.scss, _header.scss ...

htmlstylesnav

Tips for avoiding duplicate usernames in mySQL when working with PHP

My users register for the database, but how can I prevent duplicate usernames in the database? I want to inform the user if their username already exists. <?php $error = ""; // error $GoodJob = ""; if(isset($_POST[&apos ...

phphtmlmysqlsql

IE not rendering 'right' property in jqueryui CSS

I am attempting to shift a neighboring element after resizing a text area, triggered by the stop event on jqueryUI's resizable feature: $("textarea").resizable({ stop: function (event, ui) { var x = ui.originalElement.closest("li").find(" ...

cssjquery-uiinternet-explorer

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

What is the best way to enable an image to be moved on top of another image?

Is there a way to allow users to drag around an image that is positioned on top of another image in an HTML file? I want the superimposed image to stay within the boundaries of the underlying image. Any suggestions on how this can be achieved? <html& ...

javascriptjqueryhtmlcss

Is there a way to position the input directly above the div in the center?

In my HTML code, I have a div container with an input and another nested div element that contains various other elements. My goal is to center the input element in relation to the parent div, where error messages are displayed. Currently, both elements s ...

cssangular

Guide on utilizing regular expressions to match CSS selectors

Attempting to determine if the head section in jQuery contains the font-weight:bold property within CSS. That particular property may exist in 4 different variations: font-weight:bold font-weight: bold font-weight :bold font-weight : bold Is there a way ...

cssregex

Bookmarklet in JavaScript that automatically extracts and displays Meta keywords in a new tab within the browser

I successfully implemented a script that extracts site meta keywords and writes them into the DOM. javascript:(function metaKeywords() { metaCollection = document.getElementsByTagName('meta'); for (i=0;i<metaCollection.length;i++) { nameAttri ...

javascripthtmldombookmarklet

What could be causing my col-x to not function correctly in Bootstrap?

I am trying to modify my Bootstrap navbar by adding a Login button, but I encountered an issue. When I use col-x classes inside the navbar to separate elements equally, they only cover 50% of the width and no more. However, using col-x classes outside the ...

htmlcsstwitter-bootstrapbootstrap-4

Resize a responsive grid of images

Within my slider, I have three slides with 3 images each. The layout consists of one large image on the left and two smaller ones on the right. To ensure responsiveness, I've used max-width: 100% on the images so they can scale down proportionally as ...

jquerycssresponsive-design

Navigate to a unique component

I am attempting to navigate to the location of a custom component, but the reference to it is not returning a valid HTML node. The function "goToContactUs" should execute this action. What would be the most effective approach to accomplish this? class H ...

javascripthtmlreactjs

Utilizing the 'input' method to modify the key of an array object within specified elements in a Vue.js application

i am looking to implement an input field that can be used to edit the title of the currently selected element component (the selection is made by clicking). The challenge here is to have a single input that works for each individually selected element. I h ...

javascripthtmlvue.jsvue-component

The HtmlHelper ActionLink consistently establishes the current controller instead of allowing for the specification of another controller

I have been utilizing the HtmlHelper class to incorporate some code into my layout Navbar as a menu. Here is the code snippet: public static MvcHtmlString MenuLink(this HtmlHelper helper,string text, string action, string controller) { ...

htmlbootstrap-4asp.net-mvc-5

Implementing a Vue.js v-bind:style attribute onto a dynamically generated element post-page initialization

Let me start by explaining my current issue and dilemma: I have been tasked with converting an existing JS project into a Vue.js framework. While I could easily solve a particular problem using jQuery, it seems to be posing quite a challenge when it comes ...

javascriptcsscanvasvue.js

Looking for assistance in turning this curl script into one that can handle multiple links

Below is a script that has the ability to download files from a given URL. However, I am looking for a way to include multiple links for downloading files. Instead of having a button to add another input box for URLs, I want users to be able to input three ...

phphtmlcurl