Jump to content

Проблема с hover


a!max
 Share

Recommended Posts

Здравствуйте. Почему при наведении на 3 блок, нижние 2 блока смещаются резко вниз?
В чем моя ошибка?
Ссылка на архив с сайтом: https://yadi.sk/d/DaMKfImK3K8DiF

Link to comment
Share on other sites

6 минут назад, a!max сказал:

Здравствуйте. Почему при наведении на 3 блок, нижние 2 блока смещаются резко вниз?
В чем моя ошибка?
Ссылка на архив с сайтом: https://yadi.sk/d/DaMKfImK3K8DiF

.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
    margin-top: 28px;
}

измени на:

.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
}

 

Link to comment
Share on other sites

1 час назад, Silence сказал:
.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
    margin-top: 28px;
}

измени на:

.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
}

 

Я знаю, что без margin будет работать, ведь я сначала box-shadow делал ^_^
Но нельзя просто так выкинуть свойство margin, мне нужен этот эффект "подпрыгивания/перемещения"
Какой-то трабл наверно с float

Link to comment
Share on other sites

2 минуты назад, a!max сказал:

Я знаю, что без margin будет работать, ведь я сначала box-shadow делал ^_^
Но нельзя просто так выкинуть свойство margin, мне нужен этот эффект "подпрыгивания/перемещения"
Какой-то трабл наверно с float

Я не вижу разлику с margin  и  без margin ето просто hover efect

Link to comment
Share on other sites

2 минуты назад, Silence сказал:

Я не вижу разлику с margin  и  без margin ето просто hover efect

Хочу, чтобы поднимались блоки на несколько пикселей, но вот почему мне интересно некоторые блоки ведут себя странно...

Link to comment
Share on other sites

1 минуту назад, a!max сказал:

Хочу, чтобы поднимались блоки на несколько пикселей, но вот почему мне интересно некоторые блоки ведут себя странно...

Попробуй вместо margin поставит ето:

    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);

 

Link to comment
Share on other sites

4 минуты назад, Silence сказал:

Попробуй вместо margin поставит ето:

    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);

 

Работает, но я так понимаю webkit это только для chrome?

Link to comment
Share on other sites

3 минуты назад, a!max сказал:

Работает, но я так понимаю webkit это только для chrome?

https://www.w3schools.com/css/css3_transitions.asp

Link to comment
Share on other sites

2 минуты назад, Silence сказал:

Спасибо за ответ, теперь пойду спокойно спать ^_^

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...