Меню не должно перемещаться при наведении мыши. Положение должно быть зафиксировано

0

Я использую отзывчивое меню. font-weight устанавливается в нормальное состояние. Но при наведении мыши я меняю font-weight на жирный/курсив. Вот почему размер меню меняется.

Как я могу это предотвратить?

div.menu a span {        
    color: #000000;    
    display: block;    
    font-size: 14px;    
    padding:5px 0;  
}

При наведении мыши:

div.menu a span:hover {    
    color: #FFF; 
    cursor: pointer; 
    font-weight:bold;
    font-size: 14px;
    padding:5px 0;
}

JS скрипка здесь

  • 0
    установить ширину по умолчанию для меню в css width: 40px; что-то вроде этого
  • 0
    поделиться JS скрипкой
Показать ещё 1 комментарий

2 ответа

0

Вам не нужно указывать размер шрифта в режиме наведения, поскольку он будет наследовать от div.menu a span.

Затем, если вы можете добавить атрибут line-height в div.menu a span { block, проблема изменения размера может быть решена.

div.menu a span {        
    color: #000000;    
    display: block;    
    font-size: 14px;    
    padding:20px;  
    float: left;
    width: auto; // you can have fixed width also
}

div.menu a span:hover {    
    color: #FFF; 
    cursor: pointer; 
    font-weight:bold;

}

Рабочая демонстрация: JSFIDDLE

  • 0
    @mohanedrias: Мое меню горизонтальное, а не вертикальное.
  • 0
    Пожалуйста, укажите ширину в div.menu span {рабочая демонстрация: jsfiddle.net/mohamedrias/YyRu7/2
Показать ещё 6 комментариев
0

В вашем div.menu a span:hover { } удалите свойство font-size: 14px и div.menu a span{ } добавьте свойство div.menu a span{ } line-height для решения этой проблемы.

div.menu a span {        
    color: #000000;    
    display: block;    
    font-size: 14px;    
    padding:5px 0;  
    line-hegiht: 20px; /* set your self */
}

div.menu a span:hover {    
    color: #FFF; 
    cursor: pointer; 
    font-weight:bold;
    padding:5px 0;
}
Сообщество Overcoder
Наверх
Меню