Позиционирование элемента при наведении на другой элемент

Question

У меня есть div с CSS «display: none», и я хочу, чтобы он был определен определенным образом, одновременно зависав образ класса «Предварительный просмотр». Я не могу использовать только CSS, потому что мой скрытый div включает в себя изображения, которые нужно изменить в зависимости от того, какое изображение из элемента списка вы наводите. Я читал и пробовал все здесь, How to position one element relative to another with jQuery?

но ничего не работает для меня. Вот мой HTML:

<div id="content"> 
     <ul> 
      <li> 
       <a href="#"> 
        <img class="preview" src="images/E46_1.jpg"> 
       </a> 
       <div>Whatever whatever whatever whatever whatever</div> 
      </li> 

      <li> 
       <a href="#"> 
        <img class="preview" src="images/E93_1.jpg"> 
       </a> 
       <div>Whatever whatever whatever whatever whatever</div> 
      </li> 

      <li> 
       <a href="#"> 
        <img class="preview" src="images/E46_1.jpg"> 
       </a> 
       <div>Whatever whatever whatever whatever whatever</div> 
      </li> 
     </ul> 
    </div> 

И мой DIV с CSS "дисплей: ни один" слайдер.

Я думаю, мне нужен простой (не похожий на те из ссылок, которые я опубликовал выше) аналог JBuery для Javascript в JQuery. Пожалуйста помоги!

Answer 1

Если вы можете уточнить, я могу сделать это лучше, но для основы, здесь идет:

здесь сочетание обоих: http://jsfiddle.net/zc2m9yh1/

JQ:

$("#content ul li").hover(function() { 
    var src = $(this).find("img").attr("src"); 
    $(this).children("div").html('<img src="' + src + '">'); 
}, function() { 
    //on mouseout 
}); 

CSS :

#content ul li div { 
    display: none; 
} 
#content ul li:hover div { 
    display: block; 
} 
#content ul li img { 
    max-width: 100px; 
} 

Answer 2

Здесь следующим образом:

var pos = $(element to position by).position(); 

var width = $(this).outerWidth(); 

//show the element over the placeholder 
$("item to position").css({ 
    position: "absolute", 
    top: pos.top + "px", 
    left: (pos.left + width) + "px" 
}).show(); 

});

Отличный пример работы здесь также на скрипке, созданной другим. http://jsfiddle.net/wjbuys/QrrpB/