Наведите указатель мыши на текст

Question

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

изображение:

#menu { 
    float: right; 
    height: 30px; 
    margin: 50px 70px 0; 
    width: 530px; 
} 

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    padding: 12px 12px; 
    text-decoration: none; 
} 

#menu a:hover { 
    background: url(images/hover.png) repeat-x; 
} 

Так что мои вопросы:

1. Как расширить интервал между меню текста и парения thng?
2. Как соответствовать длине наведения текста?
3. Как сделать зависание видимым на активной странице?

Answer 1

1. Как расширить интервал между меню текста и зависания изображения?
   Добавить padding-bottom: 12px. Измените 12px на ваш выбор значения, это регулирует горизонтальное расстояние. Добавьте 0 bottom в тег background, чтобы изображение было размещено в нижней части ссылки.

2. Как ограничить длину наведения текста?
   Добавьте вместо этого padding в собственность margin и удалите прокладку. Это означает, что длина фонового изображения будет соответствовать длине текста.

3. Как сделать зависание видимым на активной странице?
   Чтобы активный виджет страницы оставался видимым, вы можете указать текущую активную страницу классу selected. Как показано в HTML в нижней части ответа.

CSS:

#menu { 
    float: right; 
    height: 30px; 
    margin: 62px 82px 12px 12px; /* Adjust margin to include the padding */ 
    width: 530px; 
} 

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    /* Remove your padding here. Has been adjusted in the margin */ 
    padding-bottom: 12px; /* Adjust to change the hover spacing */ 
    text-decoration: none; 
} 

#menu a:hover, #menu a.selected { 
    background: url(images/hover.png) repeat-x 0 bottom; 
} 

HTML (Пример использования класса selected):

<div id="menu"> 
    <a href="l1.html">Link 1</a> 
    <a href="l2.html" class="selected">Link 2</a> 
    <a href="l3.html">Link 3</a> 
</div> 

Answer 2

Изменить положение фонового изображения

background: url('images/hover.png') repeat-x 0 10px; 

Вы говорите о длине парения под текстом? Вы можете либо добавить «активный» класс и стиль его точно так же, как зависания или добавить в: активные вместе с #menu a:hover,#menu a:active

Answer 3

1. Попробуйте background-position.
2. Когда вы пытаетесь согласовать свое изображение с шириной текста, у вас есть элемент без поля и отступов, в который вы примените свой зависание.
3. Имейте дополнительный класс, прикрепленный к вашему активному элементу: #menu a:hover, #menu a.active.

Answer 4

1. дайте свой a высоту и положение изображения в нижней
2. изменить padding на margin (пространство вне элементов вместо внутри)
3. сделать дополнительный класс как .focus

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    display: inline-block; 
    height: 60px; 
    padding: 12px 12px 0 12px; 
    text-decoration: none; 
} 

#menu a:hover { 
    background: url(images/hover.png) bottom left repeat-x; 
} 

#menu a.focus { 
    ... active link style 
} 

Answer 5

Используйте это:

#menu a { 
    color: black; 
    font-size: 15px; 
    font-weight: bold; 
    padding: 12px 12px; 
    text-decoration: none; 
    padding-bottom: 20px; 
    background-postion-y: -10px; 
}