Question

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

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

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

我正在使用php while循环每页显示十个post 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及更新版本的浏览器，前提是您使用strict doctype（支持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;
}

将一个div改成另一个？

3 个答案: