Как сделать всплывающий div?

Question

[Space]

Как сделать всплывающий див при наведении именно такой?

Comments

[Андрей]

можно использовать готовые ответы. но если задача во всплывающем див-е сделать форму обратной связи?

Answer 1

[Никита]

задать блоку с надписью "Задать вопрос" position: relative;
сверстать всплывающий див, ему задать display: none; position:absolute;

И добавить "Задать вопрос": hover "всплывающий блок" display: block;

Так же вы можете воспользоваться js плагинами)

Comments

[Alexander Lashchevsky]

Именно так и всё и надо, +1!

[Space]

@Rema1ns спасибо, оказывается забыл про position

[Space]

@Rema1ns а вот если при нажатии, то как будет? Если active, то как нажатие убираешь - див прячется. Как сделать чтобы только при повторном нажатии или в другое любое место элемент этот пропадал?

[Никита]

При нажатии уже только css не хватит, можно через Jq, написать функцию на клик, и обработчик на отлавливание тыка вне элемента

[Space]

@Rema1ns Можно хотя бы зацепку?

[Никита]

$('Задать вопрос').click(function(){
$(всплывающий блок).toggle();
}
))

var container = $("всплывающий блок");
if (container.has(e.target).length === 0 || $('#всплывающий блок').is('visible')){
container.slideUp();
}

Не забудьте подключить Jq

[Space]

@Rema1ns в кавычках прописывать класс (id)?

[Никита]

$("всплывающий блок"); - класс или id всплывающего блока
$('Задать вопрос') - класс или id блока с задать вопрос

Вам надо всю конструкцию поместить в
$(document).ready(function(){
# ваш код
})

Answer 2

[A K]

Вариант без js,
jsfiddle.net/h6u41r51

Comments

[Space]

@Symphony Не плавает за самим элементом, span.

[A K]

jsfiddle.net/h6u41r51/1

[Space]

@Symphony Спасибо