Как сделать так, что бы при наведении на ссылку применялись свойства уменьшения только к одной ссылке?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="On this site I will study CSS, HTML and Java Script"> <meta name="keywords" content="Java-Script, JS, Java Script, HTML, CSS, SCSS, SASS, Home"> <title>MyprojectS2</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="/2023/myproject2/Myproject/img/i.webp"> </head> <body> <header class="header"> <div class="header__logo"><img src="/Материалы web-разработка бесплатный курс/Project-1/01-Logo.svg"></div> <nav class="header__menu"> <ul class="header__menu-list"> <li class="header__menu-item"><a href="" class="header__menu-link">O нас</a></li> <li class="header__menu-item"><a href="" class="header__menu-link ">Новости</a></li> <li class="header__menu-item"><a href="" class="header__menu-link">меню</a></li> <li class="header__menu-item"><a href="" class="header__menu-link">контакты</a></li> </ul> </nav> </header> <main class="main"> <section class="main__section"> <div class="main__section-content"> </div> </section> <section class="main__section"></section> <section class="main__section"></section> </main> <footer> <nav></nav> </footer> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="format-detection" content="telephone=no"> <meta name="description" content="On this site I will study CSS, HTML and Java Script"> <meta name="keywords" content="Java-Script, JS, Java Script, HTML, CSS, SCSS, SASS, Home"> <title>MyprojectS2</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="/2023/myproject2/Myproject/img/i.webp"> </head> <body> <header class="header"> <div class="header__logo"><img src="/Материалы web-разработка бесплатный курс/Project-1/01-Logo.svg"></div> <nav class="header__menu"> <ul class="header__menu-list"> <li class="header__menu-item"><a href="" class="header__menu-link">O нас</a></li> <li class="header__menu-item"><a href="" class="header__menu-link ">Новости</a></li> <li class="header__menu-item"><a href="" class="header__menu-link">меню</a></li> <li class="header__menu-item"><a href="" class="header__menu-link">контакты</a></li> </ul> </nav> </header> <main class="main"> <section class="main__section"> <div class="main__section-content"> </div> </section> <section class="main__section"></section> <section class="main__section"></section> </main> <footer> <nav></nav> </footer> </body> </html>
@import "..//nostyle.scss"; @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto&display=swap'); body{ background-color: #ffe2b0; } .header{ &__logo{ text-align: center; margin: 0 0 20px 0 ; } &__menu{ text-align: center; } &__menu-list{ display: inline-flex; } &__menu-item{ margin: 0 100px; } &__menu-link{ color: black; text-decoration: none; font-family: "Roboto", serif; font-weight: 900; letter-spacing: 6px; font-size: 24px; text-transform: uppercase; &:hover { color: #524d4d; font-size: 22px; } } } .main{ &__section-content{ background-image: url('/2023/myproject2/Myproject/img/01-Картинка-фона.jpg') 0 0/cover center no-repeat; } } |
@import "..//nostyle.scss"; @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto&display=swap'); body{ background-color: #ffe2b0; } .header{ &__logo{ text-align: center; margin: 0 0 20px 0 ; } &__menu{ text-align: center; } &__menu-list{ display: inline-flex; } &__menu-item{ margin: 0 100px; } &__menu-link{ color: black; text-decoration: none; font-family: "Roboto", serif; font-weight: 900; letter-spacing: 6px; font-size: 24px; text-transform: uppercase; &:hover { color: #524d4d; font-size: 22px; } } } .main{ &__section-content{ background-image: url('/2023/myproject2/Myproject/img/01-Картинка-фона.jpg') 0 0/cover center no-repeat; } }
Дополнительно:
3.1
Другие при этом, да, сдвигаются. Просто потому что соседняя уменьшилась.
Т.е. нужно либо фиксировать ширину ссылок либо компенсировать это уменьшение любым удобным способом.
См.п.3.1 Регламента.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы при наведении на ссылку применялись свойства уменьшения только к одной ссылке, вы можете использовать CSS псевдокласс `:hover` совместно с классами или атрибутами.
Вот пример кода на HTML и CSS, который позволит вам достичь нужного эффекта:
```html
.link {
font-size: 16px;
transition: font-size 0.3s;
}
.link:hover {
font-size: 14px;
}
Ссылка 1
Ссылка 2
Ссылка 3
```
В данном примере при наведении курсора на любую из ссылок, размер шрифта уменьшится. Таким образом, свойства уменьшения будут применяться только к той ссылке, на которую навели курсор.
Вы также можете изменить другие свойства ссылки при наведении, например цвет текста, фон и т.д., используя CSS псевдокласс `:hover`.
Надеюсь, это поможет вам решить вашу проблему! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.