0

誰かがJqueryのcssの質問を手伝ってくれるかどうか疑問に思っています。

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

私が疑問に思っているのは、投稿divにカーソルを合わせながら、タイトルの横にある画像をどのように貼り付けるかです。その後、マウスアウトすると画像は表示されません。

php whileループを使用して、ページごとに10個の投稿divを表示しています。

4

3 に答える 3

3

このようなものがうまくいくはずです。

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

JSFiddle

于 2012-06-08T18:54:21.657 に答える
3

何をしたいのか (画像をどこに置きたいのか) は明確ではありませんが、CSS だけで次のようなことを簡単に行うことができます。

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

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

JSFドル

これは、厳密な doctype (IE 7 サポート用)を使用する場合、IE 7 以降のブラウザーで機能します。IE 6 ではまだ動作しません。

于 2012-06-08T18:55:45.240 に答える
2

見てください、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;
}
于 2012-06-08T18:58:54.103 に答える