鼠标悬停在图像上附加Div

Question

我使用小型MCE作为编辑器。正如你在谷歌博客上面的图片中看到的那样，当你将鼠标悬停在图像上时，它会显示图像下面的div，它具有“小”，“中”，“大”选项。任何建议/样本我将如何能够用JQuery做什么？

Answer 1

您可以使用链接或任何内容准备div，并将其display css属性设置为“none”。然后用这样的jQuery控制它。

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

更多关于主题here（jQuery api）。您可能需要调整悬停功能。 （就像添加超时一样，鼠标输出后它不会立即消失。）

你可以想象看起来像这样的HTML代码：

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

您还可以在外部样式表中使用css类而不是内联样式。但这只是一个简单的例子。