#html #css #вёрстка
Подскажите пожалуйста, как в данном коде сделать, чтобы тест выпадал плавно вправо .content { display: inline-block; vertical-align: top; /* по умолчанию baseline */ background: #ccc; padding: 5px; } .hide { display: none; background: #000; color: #fff; text-align: center; } .content:hover .hide { display: block; }hoverText
hoverText
hoverText
Ответы
Ответ 1
.content { display: inline-block; vertical-align: top; /* по умолчанию baseline */ background: #ccc; padding: 5px; position: relative; } .hide { background: #000; color: #fff; text-align: center; position: absolute; top: -17px; right: -55px; z-index: 2; width: 0px; height: 30px; overflow: hidden; } .content:hover .hide { width: 50px; transition: width 0.1s; }hoverText
hoverText
hoverText
Ответ 2
Задание ваше звучит непонятно, что значит выпадал. В любом случае, вот мой вариант: .content { background: #ccc; display: inline-block; padding: 5px; position: relative; } .hide { background: #000; color: #fff; opacity: 0; position: absolute; padding: 4px 10px; pointer-events: none; left: 100%; top: 0; transform: translateY(-50%); transition: opacity 0.9s; text-align: center; z-index: 2; } .content:hover .hide { opacity: 1; }hoverText
hoverText
hoverСкорее всего придётся вам дорабатывать код под себя, также необходимо проверить кроссбраузерность.Text
Ответ 3
Это внесите в css .content:hover .hide { display: inline-block; }Ответ 4
.content { display: inline-flex; vertical-align: top; background: #ccc; padding: 5px; } .hide { background: #000; color: #fff; text-align: center; transform: translateX(-100%); width: 0; height: 0; opacity: 0; margin: 0; } .content:hover .hide { transform: translateX(5px); margin-right: 5px; width: auto; height: auto; opacity: 1; } .content:hover .hide { animation-name: anim; animation-duration: 700ms; animation-iteration-count: 1; animation-direction: normal; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-delay: 0s; } @keyframes anim { 0% { transform: translateX(-100%); margin-right: 5px; width: 0; height: 0; opacity: 0; } 2% { opacity: 0; transform: translateX(-100%); width: auto; height: auto; } 100% { transform: translateX(5px); opacity: 1; width: auto; height: auto; } }hoverTexthoverTexthoverText
Комментариев нет:
Отправить комментарий