CODEWITHSUNDEEP
htmlcsscss-transitions
matanvan
matanvan

Reputation: 11

The CSS transition property acting weird

I have a div that expands in height and changes it's border color on hover.

This is the CSS:

div.options {
    width: 80%;
    height: 62.7px;
    margin: auto;
    border-radius: 15px;
    border: 3px solid #d0d0d0;
    overflow: hidden;
    transition: height 1s, border-color 1s;
}

div.options:hover {
    height: 627px;
    border-color: #656565;
}
<div class="options">Hello</div>

It works as it should on hover, but the problem is that the border color of the div changes from default black to the specified #d0d0d0 right on page load. The problem only occurs with ctrl+f5 reload, not regular reload. How do I make it not do that thing it does?

Upvotes: 1

Views: 77

Answers (1)

Revon Zev
Revon Zev

Reputation: 105

I have tested this on Firefox 72, Edge 84, and IE 11 with your code and a div like this:

<div class="options"></div>

It is functioning, there is no color flickering from black on page load with or without CTRL+F5.

Perhaps it is something from your side.

Upvotes: 1

Related Questions