Есть изображение и рядом с изображением ссылка на одном уровне. На изображении css стиль, при наведении, оно опускается немного вниз. Как сделать чтобы при наведении и на ссылку, изображение опускалось так же вниз, но ссылка оставалась на месте. У меня же получается, что если я стиль прописываю к ссылке, она тоже сдвигается вниз. Помогите!) Код (CSS): .hvr-sink { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active { -webkit-transform: translateY(8px); transform: translateY(8px); }
сказать "нет" но можно потрахаться только ради того, чтобы был дебильный никому не нужный эффект ховера из начала двухтысячных. Начни с того, чтобы запхать обои эти твои элемента в один контейнер и там уже играйся с его ховером и их маргинами. Есть шанс что этого хватит.
html кода нет и ничего не понятно с какими элементами ты это проделываешь. Похоже, что с таблицей, но точно не понятно. Вот тебе пример, описанный igordata, а ты уже под свой код локализуй. HTML: <div class="cont"> <img src="путь" /> <a href="путь"></a> </div> Код (CSS): .cont { // стили для дива. } .cont img { //стили для картинки margin-top:5px; } .cont a { //стили для ссылки margin-top:5px; } .cont a:hover { margin-top:10px; }
я не знаю ни одного селектора, работающего с права на лево. =( и там не нашел. Можно поменять картинку и ссылку местами, и шарашить флоатами, но это уже шаманство, и без контейнера тут не обойтись, а с контейнером можно так просто.
Что-то из этого подойдет, я думаю, если правильно контейнер организовать. А еще можно бомбить через атрибуты.
имхо с контейнером можно обойтись тегами или классами. олько я всё равно против смещения элемента интерфейса как ховер эффекта. Бэкграунд смещать - да. А сам элемент двигать - нет. А случись я ему мышку сверху наведу, он поедет, уедет из под мышки, дальше он будет возвращаться, приедет, а там его уже мышка ждёт, а он вновь от неё наутёк - дурдом!
Надо попробовать, обжечься, получить бесценный опыт и больше никогда не использовать. Хочет человек дерганную ссылку - пусть попробует. Потом изменить не долго...
Просто не надо топорно подходить к вопросу. Это элементарная задачка же. И уж тем более не надо для смещения элементов использовать маржины. 2017 год на дворе. https://jsfiddle.net/sratadjn/
какое-то время я пытался это прочесть да, транслейт заебись, я в него пока не верю, но пора, да. Всё равно не вижу смысла элементы двигать.
Двигать при ховере я тоже не вижу смысла. Это не логично. Коль уж нужно что-то подобное, то логичнее, имхо, как-то так: https://jsfiddle.net/sratadjn/1/ обрати внимание, кстати, что надпись тоже скейлится. Объект ведет себя как gl-surface. Ну или как битмап. --- Добавлено --- А так, чтобы было понятнее, что там происходит, и почему нельзя для анимаций и эффектов юзать маржины, вот: https://jsfiddle.net/sratadjn/2/ Красное - это контейнер. При отрабатывании анимашечки, его размеры не меняются. Трансформации это как бы изменение объекта относительно самого себя, но без влияния на верстку. Как если бы объект был фиксированно или абсолютно спозиционирован, но не выпадая из потока. Это поначалу рвет мозг, но это охрененный инструмент. В то время как изменение ширины-высоты или маржинов влияло бы и на контейнер. И все плыло бы к чертовой едрене фене, потому что контейнер влиял бы на что-то еще. И понеслааааась. Плюс, изменение параметров, отвечающих за верстку, по факту означает полный пересчет DOM-а. Это адулька. И кроме микро перделочек на костылях, ничего и не сваришь с таким подходом. А на трансформациях, например, у вконтакта работает мобильная версия галереи. Все эти вот пинчи, свайпы и тд, которые выглядят как нативные, на самом деле нифига таковыми не являются. При этом все работает быстро, плавно, потому что перерисовать элемент в новом месте с новым размером, поворотом и тд - это почти бесплатная операция, и DOM при этом не пересчитывается вообще. --- Добавлено --- Да, самая нямка в том, что хоть DOM и не пересчитывается, ты из JS всегда можешь узнать положение и размеры объекта под трансформацией, с учетом этой трансформации. То есть это не просто оторванное изображение объекта, скачущее по экрану, в то время как сам он хостится там же, где и был.