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

Question

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

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 скрипка здесь

Poles 08 май 2014, в 07:24

Источник

0

установить ширину по умолчанию для меню в css width: 40px; что-то вроде этого
Sudharsan S 08 май 2014, в 04:49
0

поделиться JS скрипкой
Bhushan Kawadkar 08 май 2014, в 04:50
0

покажи мне свой HTML
Rohit Azad 08 май 2014, в 04:53

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

установить ширину по умолчанию для меню в css width: 40px; что-то вроде этого

mohamedrias · Answer 1 · 2014-05-08T02-51-00.000Z

Вам не нужно указывать размер шрифта в режиме наведения, поскольку он будет наследовать от 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

@mohanedrias: Мое меню горизонтальное, а не вертикальное.
Пожалуйста, укажите ширину в div.menu span {рабочая демонстрация: jsfiddle.net/mohamedrias/YyRu7/2
Я обновил ответ. Пожалуйста, проверьте :)
@mohanmedrias: ваш код правильный, но не работает в моем CSS ... ширина постоянно меняется.
Я обновил вашу скрипку. jsfiddle.net/mohamedrias/rfQC6/2 Вам необходимо указать фиксированную ширину для элементов. Только тогда ширина не изменится.
давайте продолжим это обсуждение в чате

Jay Patel · Answer 2 · 2014-05-08T02-40-00.000Z

В вашем 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;
}