Firefox hovers with a height of 0 effect activated

Question

Firefox hovers with a height of 0 effect activated

Hey there, I'm experiencing an issue in Firefox. When I attempt to use a hover effect on a div to change the height to 0, it's behaving strangely. Is there a way to make it function like it does in Chrome? Here is the code snippet:

CSS :

#square{
    position:fixed;
    top:50%;
    left:40%;
    width:11%;
    height:22%;
    background-color:blue;
    transition:height 0.8s linear;
    -webkit-transition:height 0.8s linear;
    -moz-transition:height 0.8s linear;
}

#square:hover{
    height:0%;
}

HTML:

<div id="square"></div>

html css firefox hover transition

Answer 1

Answer №1

To maintain the hover effect even when the cursor is no longer over the #square div, wrap it in a parent div like this:

CSS

#mydiv {
    position:fixed;
    top:50%;
    left:40%;
    width:11%;
    height:22%;
}
#mydiv:hover>#square {
    height:0%;
}

HTML

<div id="mydiv">
    <div id="square"></div>
</div>

Check out the demo on jsFiddle

Answer 2

To maintain the hover effect even when the cursor is no longer over the #square div, wrap it in a parent div like this:

CSS

#mydiv {
    position:fixed;
    top:50%;
    left:40%;
    width:11%;
    height:22%;
}
#mydiv:hover>#square {
    height:0%;
}

HTML

<div id="mydiv">
    <div id="square"></div>
</div>

Check out the demo on jsFiddle

Answer 3

Answer №2

Hey there, It's interesting to note that when you adjust the size of an element on hover, particularly when decreasing its size, your cursor may end up outside of the element's boundaries. In Firefox, this can result in some blinking, while Chrome struggles to handle these height changes properly, which could be considered a bug. If you'd rather not complicate your HTML structure by adding nested divs to contain the hover element, one solution is to use JavaScript (I personally prefer jQuery):

      $(document).ready(function(){
              $('#square').hover(function(){
                   $(this).css('height',0);
                   //or use the following line if you want to hide the element:
                   $(this).hide();
              });
      });

Answer 4

Hey there, It's interesting to note that when you adjust the size of an element on hover, particularly when decreasing its size, your cursor may end up outside of the element's boundaries. In Firefox, this can result in some blinking, while Chrome struggles to handle these height changes properly, which could be considered a bug. If you'd rather not complicate your HTML structure by adding nested divs to contain the hover element, one solution is to use JavaScript (I personally prefer jQuery):

      $(document).ready(function(){
              $('#square').hover(function(){
                   $(this).css('height',0);
                   //or use the following line if you want to hide the element:
                   $(this).hide();
              });
      });

Answer 5

Answer №3

Give this a try, it should work perfectly. Let me know if this is the correct solution.

 <div id="box" class="square-box">
       <div id="square" class="shape-square"></div>
    </div>

CSS

#box{
    position:absolute;
    top:30%;
    left:20%;
    width:10%;
    height:20%;
}
#box > #square{
    width:100%;
    height:100%;
    background-color:#ccc;
    transition:all ease-in-out .3s 0s;
}
#box:hover > #square {
    height:0%;
}

Answer 6

Give this a try, it should work perfectly. Let me know if this is the correct solution.

 <div id="box" class="square-box">
       <div id="square" class="shape-square"></div>
    </div>

CSS

#box{
    position:absolute;
    top:30%;
    left:20%;
    width:10%;
    height:20%;
}
#box > #square{
    width:100%;
    height:100%;
    background-color:#ccc;
    transition:all ease-in-out .3s 0s;
}
#box:hover > #square {
    height:0%;
}

Firefox hovers with a height of 0 effect activated

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to dynamically insert my own <divs> into a container?

Troubleshooting a Navbar Issue in a Custom Bootstrap Template

Solving issues with Tailwind CSS class names within Next.js

Click event not triggering to update image

Exclude a particular row from a table when there is no identifier

Strip away any inline styles and (almost all) classes from an HTML snippet

Transmit data from an HTML form to PHP using JSON

Proper method for adding elements in d3.js

Tips for resolving vertical alignment styling for images of varying sizes within Vue.js transition-group?

Loading Web Applications Screen

Tips for encapsulating an image generated using execCommand

Is there a way to reduce the height of the year dropdown list in the datepicker? It currently extends too far and takes up a lot of space in the viewport

What are the steps to display the entire image instead of a cropped version?

What is the best way to incorporate navigation options alongside a centered logo?

Unusual phenomenon of overflow and floating point behavior

What is the alternative to using echo when outputting HTML?

"Utilizing ng class with an array of objects: A step-by-step guide

Classic leading and CSS line-height traditional styling

"Troubleshooting: Click counter in HTML/Javascript unable to function

Footer division misbehaving