#html #css
#HTML #css
Вопрос:
Я добавил границу к кнопке при наведении курсора мыши, но это нарушает HTML-макет. Как я могу это сделать, не нарушая HTML-макет?
Ответ №1:
Почему бы не иметь границу там постоянно, но изначально иметь ее того же цвета, что и фон, чтобы она была эффективно прозрачной?
Затем просто измените цвет при наведении курсора мыши.
Комментарии:
1. Я думаю, что это более надежный выбор.
2. Я согласен, что это более надежный выбор (чем мой, который работает). Я бы не стал добавлять / удалять границы, если бы мог помочь этому только из-за нарушения коробочной модели.
Ответ №2:
Вы можете использовать свойство css box-sizing , написанное следующим образом:
.child:hover{
border:1px solid green;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Проверьте это http://jsfiddle.net/zFJHV/1 /
или
вы можете использовать
div{
border-bottom:1px solid red;
margin-bottom:-1px;
}
Редактировать:
может быть, вы можете использовать outline вместо border проверки этого:
Комментарии:
1. Однако размер поля не идеален, он перемещает содержимое внутри поля. Попробуйте использовать границу размером 5 пикселей.
2. Я стараюсь держаться подальше от отрицательных полей, насколько это возможно. Я не уверен, что считаю это наиболее надежным / совместимым с несколькими браузерами методом.
Ответ №3:
При наведении курсора уменьшите ширину кнопки на ширину границы в пикселях x2.
Например, если кнопка имеет ширину 100 пикселей и вы добавляете рамку размером 1 пиксель по всему периметру, то при наведении курсора CSS должен быть:
width: 98px;
border: 1px solid #000;
Ответ №4:
Существует несколько возможных решений, некоторые из которых были опубликованы в других ответах.
Если вы хотите, чтобы граница проходила по всему элементу, самым простым и непринужденным является добавление контура. Контуры не влияют на поток элемента, но они не работают на отдельных сторонах. (Их цель — использовать для отладки, а не для проектирования.)
button:hover { outline: 1px solid black; }
Решение Стефани по уменьшению ширины элемента не приведет к перемещению других элементов на странице, но поскольку вы уменьшаете размер элемента, содержимое внутри будет перемещено. (Редактировать: на самом деле теоретически это могло бы перенести часть текста на дополнительную строку и, таким образом, переместить некоторые другие элементы вниз.)
Вы можете установить отрицательное поле при наведении курсора мыши, как сказал Сандип (в его первоначальном ответе), что эффективно устраняет дополнительное пространство, используемое элементом. Насколько я могу судить, это не влияет на поток, но могут быть крайние случаи.
button:hover { border: 1px solid black; margin: -1px; } /* all sides*/
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */
Другое решение — установить границу такой же, как цвет фона (как предлагает сэр Криспалот), или вы можете сделать ее прозрачной. Затем измените цвет при наведении курсора мыши. Сделать его прозрачным будет работать на фоне любого цвета, но цвет фона элемента (кнопки в вашем случае) будет просвечиваться.
/* for a patterned page background: */
button { border-bottom: 1px solid transparent; }
button:hover { border-bottom: 1px solid black; }
/* or, if the button has a background colour: */
button { border-bottom: 1px solid #fff; }
button:hover { border-bottom: 1px solid black; }
Ответ №5:
При наведении курсора мыши добавьте границу и уменьшите ширину и высоту на 2 пикселя каждая. Это не изменит макет.