jquery - 悬停一个 div 改变另一个？

Question

我想知道是否有人可以帮助我解决 Jquery css 问题。

<div class='post'>
    <h1 class='title'>Title</h1>
</div>

我想知道的是如何在将鼠标悬停在帖子 div 上时在标题旁边添加图像。然后鼠标移出图像将不会显示。

我正在使用 php while 循环来显示每页十个帖子 div。

Answer 1

像这样的东西应该工作。

$('.post').bind({
    'mouseenter': function() {
        $(this).append('<img />');
    },
    'mouseleave': function() {
        $('img', this).remove();
    }
});

JSFiddle

Answer 2

目前尚不清楚您想要什么（您希望图像去哪里？），但您可以使用 CSS 轻松完成类似的操作：

.post h1 {
    padding-left: 25px;   
}

.post:hover h1 {
    background: url(http://www.dummyimage.com/20x20/000000/000) no-repeat 0 0;
}

​JSFiddle

这将适用于 IE 7 和更新的浏览器，前提是您使用严格的文档类型（用于 IE 7 支持）。它仍然无法在 IE 6 中运行。

Answer 3

看，没有 JavaScript http://jsfiddle.net/zNbHE/

<div class='post'>
    <h1 class='title'>Title</h1>
    <img width="50" height="50">
</div>​


div:hover img {
    visibility: visible;
}   
div img {
    visibility: hidden;
}
​

如果你需要支持非常老的浏览器（:hover除了链接什么都不支持）你可以用 jQuery 伪造它。额外的好处是，如果禁用 JS，图像将一直存在。

$(".post").hover(
  function () {
    $(this).addClass("hover");
  }, 
  function () {
    $(this).removeClass("hover");
  }
);

div.hover img {
    visibility: visible;
}   
div img {
    visibility: hidden;
}