Прикрепить Div к изображению при наведении мыши

Question

Я использую крошечный MCE в качестве редактора.Как вы можете видеть на изображении ниже из блога Google, когда вы наводите курсор мыши на изображение, оно показывает тот div под изображением, который имеет опции «Маленький», «Средний», «Большой».делать с JQuery?

Answer 1

Вы можете подготовить свой div со ссылками или любым содержимым и установить для его свойства display css значение none.Затем вы управляете им с помощью jQuery следующим образом.

var yourDiv = $("#ThatDiv");
$("#YourImage").hover(  
  function () {yourDiv.css('display','block');},
  function () {yourDiv.css('display','none');}
});

подробнее по теме здесь (jQuery api).Возможно, вам придется настроить функцию наведения.(Как добавление таймаута, чтобы он не исчезал сразу после наведения мыши.)

Вы можете представить себе HTML-код, который может выглядеть следующим образом:

<img src="#" alt="" id="YourImage"/>
<div id="ThatDiv" style="display:none">
  <a href="">...ETC...
</div>

И вы также будете использовать классы CSSво внешней таблице стилей вместо встроенных стилей.Но это только быстрый пример.