Свойство перехода CSS ведет себя странно

#html #css #css-transitions

#HTML #css #css-переходы

Вопрос:

У меня есть div, который увеличивается в высоту и меняет цвет своей границы при наведении курсора мыши.

Это 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>  

При наведении курсора мыши оно работает должным образом, но проблема в том, что цвет границы div меняется с черного по умолчанию на указанный #d0d0d0 прямо при загрузке страницы. Проблема возникает только при перезагрузке ctrl f5, а не при обычной перезагрузке. Как мне заставить его не делать то, что он делает?

Комментарии:

1. добро пожаловать на. Честно говоря, я не совсем понял, что он хотел сделать. извините, ваши коды отсутствуют, и мы ничем не можем с этим помочь

Ответ №1:

Я тестировал это в Firefox 72, Edge 84 и IE 11 с вашим кодом и таким разделом, как этот:

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

Оно функционирует, цвет не меняется с черного при загрузке страницы с помощью CTRL F5 или без нее.

Возможно, это что-то с вашей стороны.