css3 отступ для мыши при наведении курсора

Question

css3 отступ для мыши при наведении курсора

0

в порядке,

Поэтому у меня есть кнопка "3d" в css с: переходом на hover.

Здесь html

<nav>
<ul class="hmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
</nav>

И здесь css

ul.hmenu {
margin-top: 9%;
z-index: 50;
width: 75%;
list-style: none;
}

ul.hmenu li {
float: left;
margin-left: 5%;
}

ul.hmenu li a:before {
content: "\2022\00a0";
color: #f00;
transition: color 1s ease;
}

ul.hmenu li a {
background: #333;
color: #fff;
display: block;
font: normal 100 1.5em Helvetica, sans;
padding: .5em;
box-shadow: 5px 5px 0 0 #f00;
transition: background-color 1s ease;
text-decoration: none;    
}

ul.hmenu li a:hover, ul.hmenu li a:active {
background-color: #f00;
box-shadow: none;
transform: translate(5px, 5px);
}

ul.hmenu li a:hover:before, ul.hmenu li a:active:before {
color: #fff;
content: "\203A\00a0";  
}

И вот JSFIDDLE: http://jsfiddle.net/etb6F/

Мой вопрос: как я могу предотвратить перемещение кнопок влево, когда включено: наведите указатель мыши? Я хочу, чтобы они сохранили свою позицию, просто чтобы "надавить", но не двигаться влево.

fizzy drink 12 май 2014, в 20:26

Источник

Теги:

html

css

css3

3 ответа

0

replace: transform: translate(5px, 5px); с: margin:5px -5px -5px 5px;

Medda86 12 май 2014, в 16:32

0

пробовал это, он все еще движется в сторону
fizzy drink 12 май 2014, в 18:09

0

В строке 30: в разделе ul.hmenu li a:hover, ul.hmenu li a:active {} удалите первый экземпляр 5px. Вы должны использовать это:

ul.hmenu li a:hover, ul.hmenu li a:active {
    background-color: #f00;
    box-shadow: none;
    transform: translate(0, 5px);
}

Первое число в translate(X,Y) перемещает его вдоль оси X, а второе число (Y) перемещает его вдоль оси Y.

TylerH 12 май 2014, в 15:02

0

пробовал это, он все еще движется в сторону
fizzy drink 12 май 2014, в 18:12
0

Я думаю, что OP ищет пресс-эффект.
srrvnn 12 май 2014, в 18:13
0

@fizzydrink Извините, но это просто невозможно, если у вас нет другого кода, который вы не включили в свой JSFiddle. В предоставленной вами ссылке JSFiddle есть нулевой код, который перемещает что-либо в поперечном направлении (что означает поперечное сечение), за исключением 5px которые я изменил на 0 . Или если вы имеете в виду что-то кроме кнопки.
TylerH 12 май 2014, в 18:14
0

@fizzydrink Или ты имеешь ввиду красный фон? jsfiddle.net/TylerH/etb6F/5, который не перемещается в боковом направлении, но фактически удаляется. Я добавил его обратно и настроил его вертикальное перемещение только в этом JSFiddle.
TylerH 12 май 2014, в 18:17
0

@TylerH Я хотел сказать, что хочу, чтобы он был как кнопка, однако то, что я пробовал, сдвинуло его в сторону.
fizzy drink 12 май 2014, в 18:22

Показать ещё 3 комментария

Ещё вопросы

пробовал это, он все еще движется в сторону
@fizzydrink Извините, но это просто невозможно, если у вас нет другого кода, который вы не включили в свой JSFiddle. В предоставленной вами ссылке JSFiddle есть нулевой код, который перемещает что-либо в поперечном направлении (что означает поперечное сечение), за исключением 5px которые я изменил на 0 . Или если вы имеете в виду что-то кроме кнопки.
@fizzydrink Или ты имеешь ввиду красный фон? jsfiddle.net/TylerH/etb6F/5, который не перемещается в боковом направлении, но фактически удаляется. Я добавил его обратно и настроил его вертикальное перемещение только в этом JSFiddle.
@TylerH Я хотел сказать, что хочу, чтобы он был как кнопка, однако то, что я пробовал, сдвинуло его в сторону.

srrvnn · Accepted Answer · 2014-05-12T16-58-00.000Z

При преобразовании вы также должны поддерживать фиксированную ширину и высоту li чтобы другие кнопки не были затронуты.

ДЕМО: http://jsfiddle.net/etb6F/3/

Точная скрипка: http://jsfiddle.net/etb6F/4/

спасибо, у LI отсутствовало ограничение по размеру. даже размер% работает!