Jump to content
  • 0

Выбор события и изменение сss.


Lucifer
 Share

Question

Доброго времени суток!

Задача такая:

Есть формочка авторизации размещенная на картинке.

Нужно сделать, что бы когда на неё мышкой наводишь она выдвигалась мышку убрал она задвинулась.

Событие использовать "onMouseOver" и "onMouseOut" ?

И как изменять размеры этой формочки авторизации в CSS ?

В заранее спасибо!

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0

Нужно сделать, что бы когда на неё мышкой наводишь она выдвигалась мышку убрал она задвинулась.

Нужно? Вот и делай, раз нужно.

Событие использовать "onMouseOver" и "onMouseOut" ?

onmouseover и onmouseout, или :hover

И как изменять размеры этой формочки авторизации в CSS ?

width + height + padding + margin

Link to comment
Share on other sites

  • 0
Нужно? Вот и делай, раз нужно.

Я конечно понимаю, что у вас за день голова от идиотов пухнет ,я не имел ввиду , что мне нужно что бы за меня скрипт написали, я просто объяснил что хочу сделать!

width + height + padding + margin

Не фига не понял. Можете пожалуйста пример показать?

И ещё вопрос как элементы тега form за экран убрать?

Link to comment
Share on other sites

  • 0

Не фига не понял. Можете пожалуйста пример показать?

Для начала советую изучить боксовую модель css (а если с английским хорошо, то лучше почитать тут)

Обратить внимание на то, что к строчным (inline) элементам не применимы некоторые из свойств.

И ещё вопрос как элементы тега form за экран убрать?

Указать ему position: absolute и задвинуть отрицательным значением top за пределы экрана

Link to comment
Share on other sites

  • 0

И ещё вопрос как элементы тега form за экран убрать?

Указать ему position: absolute и задвинуть отрицательным значением top за пределы экрана

А я бы посоветовал не вверх, а влево, так как тогда не будет траблов с табом, когда они будут перескакивать на то место, где находится поле.

Link to comment
Share on other sites

  • 0
А я бы посоветовал не вверх, а влево, так как тогда не будет траблов с табом, когда они будут перескакивать на то место, где находится поле.

Честно говоря дизайнерская задумка такой и была))

Спасибо большое за помощь!

Указать ему position: absolute и задвинуть отрицательным значением top за пределы экрана

Большое спасибо за помощь))

Как благодарность с занесением в личное дело сделать?а то не кнопки спасибо не плюсиков нет...

Edited by Lucifer
Link to comment
Share on other sites

  • 0
А я бы посоветовал не вверх, а влево, так как тогда не будет траблов с табом, когда они будут перескакивать на то место, где находится поле.

Честно говоря дизайнерская задумка такой и была))

Спасибо большое за помощь!

Указать ему position: absolute и задвинуть отрицательным значением top за пределы экрана

Большое спасибо за помощь))

Как благодарность с занесением в личное дело сделать?а то не кнопки спасибо не плюсиков нет...

почему плюсиков нет?? в нижнем правом углу - красный и зелёный..

Link to comment
Share on other sites

  • 0
почему плюсиков нет?? в нижнем правом углу - красный и зелёный..

Хитрые администраторы людям с маленьким рейтингом как у меня не разрешают пользоваться данной функцией((

Сообщение об ошибке пишет ,что я исчерпал данную функцию хотя кликаю по ней первый раз.

Не радуйтесь раньше времени, еще не раз вопросы задаваться будут...

Ну не то, что бы я радовался, просто выразил устную благодарность за помощь!

Link to comment
Share on other sites

  • 0

Не стал создавать новую тему, так как в принципе к этой до сих пор относится.

Написал скрипт, который по событиям onMouseOver и onMouseOut выполняется на определенном объекте. Всё нормально всё работает, только ведёт он себя как идиот. По событию формочка вылезает, но и тут же начинает обратно залезать. Почему она себя так ведёт понять не могу, ведь курсор мыши не был выведен за границы данного объекта.

Посмотрите пожалуйста и подскажите как быть.

Edited by Lucifer
Link to comment
Share on other sites

  • 0

Посмотрите пожалуйста и подскажите как быть.

Не работает.

Чу-чуть поправил-заработало но не полностью. Я х.з почему там не работает. У себя в 4 браузерах попробовал-работает. Если не сложно пожалуйста запустите у себя.

Можно ли как нибудь границы "текущего элемента" задать?

Edited by Lucifer
Link to comment
Share on other sites

  • 0

По-моему, для ваших целей лучше подойдут события mouseenter/mouseleave. Правда, многие браузеры их не поддерживают, поэтому придется либо прибегать к помощи фреймворка, либо писать свой велосипед.

Link to comment
Share on other sites

  • 0

По-моему, для ваших целей лучше подойдут события mouseenter/mouseleave. Правда, многие браузеры их не поддерживают, поэтому придется либо прибегать к помощи фреймворка, либо писать свой велосипед.

Тут проблема в дочерних элементах, когда на лэйбел или инпут курсор попадает то срабатывает событие onmouseout а этого совсем не надо.

Эти события jQuery- не хочу лезть туда не освоив JS.

Да и задачка простая, зачем усложнять.

Edited by Lucifer
Link to comment
Share on other sites

  • 0

В чем же тогда сложность, если задача простая? Не хотите, чтобы mouseout срабатывал при переходе на потомков - напишите код, отлавливающий перемещения внутри элемента...

Плохо представляю как это делается.

Можно пожалуйста пример или объясните как это реализовать.

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
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

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

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy