Я говорю им, чтобы спросить, я хочу показать три кнопки вверху справа, когда вы позиционируете курсор указателя, и спрячьте кнопки при рисовании курсора указателя из div.Активировать кнопки в верхней части каждого div?
Как раз эта картина.
Twitter Bootstrap группы метки и входы вместе в form-group элемента. Таким образом, предполагая, что структура, как это ...
<div class="form-group">
<div class="button-wrapper">
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<label for="exampleInput">Label 01</label>
<input type="text" class="form-control" id="exampleInput">
</div>
Вы можете скрыть button-wrapper DIV и показать его при наведении курсора мыши на ориентации :hover состояние родителя.
.button-wrapper {
display: none;
}
.form-group:hover .button-wrapper {
display: block;
}
Где вы добавили стиль наведения CSS ...? –
@Hernando ': hover' - псевдоселектор, ответственный за обнаружение курсора. Вы хотите добавить его в родительский компонент, чтобы кнопки отображались, даже если пользователь не зависает точно над кнопками, как вы сказали, поэтому я добавил его в '.form-group' во втором блоке правил , – brogrammer
Вы можете использовать эту библиотеку, чтобы получить его легко:
Общая идея заключается в том, чтобы поместить значки внутри коробки, поместите их за пределы окна, скрыть их по умолчанию, и показать их с псевдо-классом :hover.
* {margin:0;padding:0;}
body {
padding-top: 2em;
}
div {
border: 1px solid black;
width: 100px; height: 100px;
position: relative;
}
ul {
position: absolute;
top: 0; right: 0;
transform: translateY(-100%);
display: none;
}
li {
display: inline-block;
}
div:hover ul {
display: block;
}<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
Не можете поделиться своим кодом с нами, чтобы поместить кнопки? –