誰かがJqueryのcssの質問を手伝ってくれるかどうか疑問に思っています。
<div class='post'>
<h1 class='title'>Title</h1>
</div>
私が疑問に思っているのは、投稿divにカーソルを合わせながら、タイトルの横にある画像をどのように貼り付けるかです。その後、マウスアウトすると画像は表示されません。
php whileループを使用して、ページごとに10個の投稿divを表示しています。
誰かがJqueryのcssの質問を手伝ってくれるかどうか疑問に思っています。
<div class='post'>
<h1 class='title'>Title</h1>
</div>
私が疑問に思っているのは、投稿divにカーソルを合わせながら、タイトルの横にある画像をどのように貼り付けるかです。その後、マウスアウトすると画像は表示されません。
php whileループを使用して、ページごとに10個の投稿divを表示しています。
このようなものがうまくいくはずです。
$('.post').bind({
'mouseenter': function() {
$(this).append('<img />');
},
'mouseleave': function() {
$('img', this).remove();
}
});
何をしたいのか (画像をどこに置きたいのか) は明確ではありませんが、CSS だけで次のようなことを簡単に行うことができます。
.post h1 {
padding-left: 25px;
}
.post:hover h1 {
background: url(http://www.dummyimage.com/20x20/000000/000) no-repeat 0 0;
}
これは、厳密な doctype (IE 7 サポート用)を使用する場合、IE 7 以降のブラウザーで機能します。IE 6 ではまだ動作しません。
見てください、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;
}