Наведите один div на другой.

Question

Мне интересно, может ли кто-нибудь помочь мне с вопросом JQuery css.

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

То, что мне интересно, - это как приклеить изображение рядом с заголовком, паря над надписью div. Затем при выводе изображения изображение не будет отображаться.

Я использую цикл php while для отображения десяти столбцов на страницу.

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; 
} 
​ 

Если вам необходимо поддерживать действительно старые браузеры (которые не SUPORT :hover ни на что, кроме ссылок) Вы можете подделать с jQuery. С добавленным бонусом, что изображение будет там все время, если JS отключен.

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

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