Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
0 / 0 / 1
Регистрация: 27.06.2016
Сообщений: 37
1

CSS - почему :hover при наведении курсора не берет всю область под указанный ему цвет

21.06.2017, 19:54. Показов 1594. Ответов 3
Метки нет (Все метки)

Добрый день всем!
За ранее благодарен тому кто откликнется!!!

:hover не берет всю область под указанный ему цвет, как лучше сделать?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="main/font.css">
    <link rel="stylesheet" href="main/style.css">
</head>
<body>
<section class="navigation">
    <div class="container">
        <div class="row">
            <nav>
                <ol>
                    <li><a href="#"><img src="img/nav/nav1.png" alt="nav1">Главная</a></li>
                    <li><a href="#"><img src="img/nav/nav2.png" alt="nav2">О нас</a></li>
                    <li><a href="#"><img src="img/nav/nav3.png" alt="nav3">Цены</a></li>
                    <li><a href="#"><img src="img/nav/nav4.png" alt="nav4">Наши работы</a></li>
                    <li><a href="#"><img src="img/nav/nav5.png" alt="nav5">Партнеры</a></li>
                    <li><a href="#"><img src="img/nav/nav6.png" alt="nav6">Контакты</a></li>
                </ol>
            </nav>
        </div>
    </div>
</section>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.navigation {
    margin: 0 auto;
    max-width: 1680px;
    min-height: 70px;
    background-color: #242424;
    border-bottom: 1px solid #3a3a3a;
}
.navigation:hover {
    border-bottom: 1px solid transparent;
}
nav ol li {
    display: inline-block;
    list-style: none;
    border-left: 1px solid #3b3b3b;
    padding-right: 27px;
}
nav ol li:hover {
    background-color: #050505;
    border-left: 1px solid transparent;
}
nav ol li a {
    font-size: 20px;
    font-family: 'BebasNeue Regular', sans-serif;
    color: white;
    line-height: 70px;
}
nav ol li a img {
    padding: 24px 10px 25px 22px;
}
nav ol li a:hover {
    background-color: #050505;
    color: white;
    border: 1px transparent;
}
nav ol li a:hover,
nav ol li a:focus {
    color: #ffffff;
    text-decoration: none;
    outline: none;
}
Миниатюры
CSS - почему :hover  при наведении курсора не берет всю область под указанный ему цвет  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.06.2017, 19:54
Ответы с готовыми решениями:

оборот букв при наведении всю область лого
буква ( с )она сейчас делает оборот при наведении на нее, а нужно чтобы когда курсор наводишь на...

Сделать элементы видимыми при наведении курсора на их область
Здравствуйте. Помогите сделать так чтобы при наведении курсора мыши в определенную область формы, в...

Почему появляются пробелы по цвету. При наведении :hover
Вот код https://jsfiddle.net/ge5ttuf0/

Как при наведении на один элемент (hover) менять стили другого элемента css?
Есть вертикальный блок навигации, список, в каждом &lt;li&gt; лежит картинка и заголовок. Цель: при...

3
107 / 101 / 35
Регистрация: 14.03.2014
Сообщений: 586
22.06.2017, 00:00 2
Лучший ответ Сообщение было отмечено Semenov Alex как решение

Решение

допишите

CSS
1
nav ol {font-size: 0;}
1
Эксперт HTML/CSS
1485 / 1233 / 517
Регистрация: 07.08.2016
Сообщений: 3,188
25.06.2017, 00:59 3
а что это даст?
0
107 / 101 / 35
Регистрация: 14.03.2014
Сообщений: 586
25.06.2017, 10:28 4
Лучший ответ Сообщение было отмечено Semenov Alex как решение

Решение

у инлайн блоков есть отступы между собой, у вас при ховере не на всю ширину была подсветка, решается это обнулением font-size у родителя, а уже дочерним элементам проставляется размер шрифта который нужен, как я понял у вас в этом проблема была, только прописывайте перед: nav ol li
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.06.2017, 10:28

Как изменить цвет Label при наведении курсора?
Есть несколько Label, которым назначен обработчик - загрузить в RichTextBox из файла rtf. Как...

Как изменить цвет вкладки при наведении курсора?
Здравствуйте! Как изменить цвет вкладки при наведении на нее курсором? Напр. вкладка серого цвета,...

При наведении курсора, ячейка должна окрашиваться в красный цвет, а при клике - в синий
При наведении курсора, ячейка должна окрашиваться в красный цвет, а при клике - в синий, но этого...

При наведении курсора на строку формы изменить цвет её фона
1)Написать script, в результате работы которого при попадании курсора мыши на элемент списка формы,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru