Как навести курсор на загрузку страницы и небольшая проблема стиля наведения

Question

Я пытаюсь изменить главную страницу Google в рамках курса html и css, который я начал. Я не могу понять, как добавить тень в поле поиска при загрузке страницы, как на веб-сайте Google.

Кроме того, при наведении на верхнее правое изображение оно меняет прозрачность, но это не должно быть происходящим Как я могу снять этот эффект?

Страница здесь: https://odiseon.github.io/google-homepage/

Answer 1

Вы можете использовать JavaScript.

window.onload

, а затем добавить имя класса в поле ввода.

используйте приведенный ниже код в качестве ссылки.

index. html

<input type='text' class='input'>

app. js

window.onload = (event) => {
  document.styleSheets[0].insertRule('.input:focus{ 
  box-shadow: 4px 4px 4px 0 (0,0,0,0.2); 
  }', 0);
}

Answer 2

Посмотрел на ваш код, это то, что вызывает проблему при наведении

header a:hover {
    opacity: 0.85;
}

Вы можете сделать что-то вроде этого

header a.user-link:hover {
    opacity: 1;
}

Глядя на поведение страницы Google, она начинается с класс, у которого есть box-shadow, а затем после первого щелчка мыши он удаляется.