Hi Paul. Thank you for the reply. I changed it to what you suggested, but I stll don’t get div.details showing up. This is the entire HTML:
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rosa Rosas Amsterdam | Shop</title>
<meta name="description" content="Accessoires, kleding, schoenen, sieraden en tassen voor vrouwen en meisjes">
<meta name="keywords" content="accessoires,kleding,schoenen,sieraden,tassen">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="7 days">
<meta property="og:title" content="Rosa Rosas Amsterdam | Shop">
<meta property="og:description" content="Accessoires, kleding, schoenen, sieraden en tassen voor vrouwen en meisjes">
<link rel="stylesheet" type="text/css" href="/css/website.css" media="screen">
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="/css/jquery-ui.theme.min.css" />
</head>
<body id="shop">
<ul class="social">
<li><a href="https://www.facebook.com/pages/Rosa-Rosas/104479572923908?pnref=lhc" title="Like Rosa Rosas op Facebook" target="_blank"><img src="/images/facebook.png" alt="Like Rosa Rosas op Facebook"></a></li>
<li><a href="https://www.pinterest.com/rosarosas/" title="Pin Rosa Rosas op Pinterest" target="_blank"><img src="/images/pinterest.png" alt="Pin Rosa Rosas op Pinterest"></a></li>
<li><a href="https://instagram.com/rosarosasvintage/" title="Vindt Rosa Rosas op Instagram" target="_blank"><img src="/images/instagram.png" alt="Vindt Rosa Rosas op Instagram"></a></li>
<li><a href="/contact" title="Neem contact op met Rosa Rosas"><img src="/images/email.png" alt="Neem contact op met Rosa Rosas"></a></li>
</ul><div id="wrapper">
<header id="header">
<section id="logo">
<a href="/"><img src="/images/logo.png"></a>
</section>
<ul id="menu">
<li><a href="/" title="Rosa Rosas homepage" class="home" target="">Home</a></li>
<li><a href="/shop" title="Accessoires, kleding, schoenen en tassen" class="shop" target="">Shop</a></li>
<li><a href="/over" title="Informatie over Rosa Rosas" class="over" target="">Over Rosa Rosas</a></li>
<li><a href="/nieuws" title="Nieuws over Rosa Rosas" class="nieuws" target="">Nieuws</a></li>
<li><a href="/fotos" title="Foto's van Rosa Rosas" class="fotos" target="">Foto's</a></li>
<li><a href="/locatie" title="Adres en locatie Rosa Rosas" class="locatie" target="">Waar & Wanneer</a></li>
</ul>
</header>
<main id="main">
<section id="content">
<h1>schoenen <a href="/shop/cart" title="" class="cart">Mijn winkelwagentje ( 0 )</a></h1>
<div id="navigation">
<div id="aantal">
<label>Per pagina </label>
<select name="count" id="count">
<option value="9">9</option>
<option value="12">12</option>
<option value="15">15</option>
</select>
</div>
</div>
<div class="wrap">
<ul id="shopping_cart" class="shopping_cart">
<li>
<form action="" method="post" name="shop-form" id="shop-form">
<a href="#"><img src="/../images/product_photos/thumbnails/hugoboss01.jpg" class="product_image" alt="hugoboss01.jpg"></a>
<input type="hidden" name="id" value="4" />
<input type="hidden" name="name" value="Hugo Boss sleehakken" />
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="price" value="25.00" />
<button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>
</form>
<div class="details">
<p><span>Product:</span>Hugo Boss sleehakken</p>
<p><span>Price:</span>25.00</p>
</div>
</li>
<li>
<form action="" method="post" name="shop-form" id="shop-form">
<a href="#"><img src="/../images/product_photos/thumbnails/amatipumps01.jpg" class="product_image" alt="amatipumps01.jpg"></a>
<input type="hidden" name="id" value="3" />
<input type="hidden" name="name" value="Leren designer pumps" />
<input type="hidden" name="quantity" value="1" />
<input type="hidden" name="price" value="30.00" />
<button type="submit" value="Submit" class="cart_button"><img src="/../images/cart_button.png"></button>
</form>
<div class="details">
<p><span>Product:</span>Leren designer pumps</p>
<p><span>Price:</span>30.00</p>
</div>
</li>
</ul>
</div>
</section>
<section id="sidebar">
<h2>Per categorie</h2>
<ul id="sidebar_nav">
<li><a href="/shop">Alle producten</a></li>
<li><a href="/shop/categorie/accessoires" title="Accessoires" class="accessoires">Accessoires</a></li>
<li><a href="/shop/categorie/kleding" title="Kleding" class="kleding">Kleding</a></li>
<li><a href="/shop/categorie/schoenen" title="Schoenen" class="schoenen">Schoenen</a></li>
<li><a href="/shop/categorie/tassen" title="Tassen" class="tassen">Tassen</a></li>
</ul>
</section>
</main>
</div>
<footer id="footer">
<p class="copyright">Copyright © 2010 - 2015<span><img src="/images/logo_footer.png"></span>. All rights reserved.</p>
<p class="credits">Design, ontwikkeling en hosting <a href="http://www.donaldboers.nl" target="_blank">Donald Boers</a> | Logo <a href="http://mikelduyts.nl/" target="_blank">Mikel Duyts</a></p>
</footer>
<div id="bericht" style="display: none; z-index: 100000;"></div>
<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jPages.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.js"></script>
<script type="text/javascript">
$("body").fadeIn(1500);
$(".fancybox").fancybox({
helpers : {
title: {
type: 'inside'
}
}
});
$("div.holder").jPages({
containerID: "gallery",
previous : "vorige",
next : "volgende",
perPage : 9
});
$(function() {
var moveLeft = 20,
moveDown = -20,
currentDiv;
$(".shopping_cart").on({
mouseenter: function (e) {
currentDiv = $(this).closest('.wrap').find('.details')
currentDiv.show();
},
mouseleave: function (e) {
currentDiv.hide();
},
mousemove: function(e) {
currentDiv
.css('top', e.pageY + moveDown)
.css('left', e.pageX + moveLeft)
}
}, "a");
});
$(function () {
$("#bericht").dialog({
autoOpen: false,
modal: true,
title: "Details",
zIndex: 3999,
dialogClass: 'no-close',
class: 'dialog_button',
buttons: {
Close: function () {
$(this).dialog('close');
setTimeout(function(){window.location = window.location}, 2000);
}
},
open: function (e, ui) {
$(this).parent().find(".ui-dialog-buttonpane .ui-button").addClass("dialog_button");
}
});
});
$("#shop-form").on("submit", function(e) {
e.preventDefault();
$.ajax({
url : "/shop/add_product",
type: "post",
data: $(this).serialize(),
success: function(data) {
$("#bericht").html($(data));
$("#bericht").dialog("open");
}
});
});
$("#cart-form").on("submit", function(e) {
e.preventDefault();
$.ajax({
url : "/shop/remove_product",
type: "post",
data: $(this).serialize(),
success: function(data){
$("#bericht").html($(data));
$("#bericht").dialog("open");
}
});
});
$("#contact_form").on("submit", function(e) {
e.preventDefault();
$.ajax({
url : "/connect",
type: "post",
data: $(this).serialize(),
success: function(data) {
$("#send_status").html($(data).fadeIn(1000));
$("#contact_form").fadeOut(1000);
$("#contact_form")[0].reset();
}
});
});
</script>
</body>
</html>Do you need to see the css as well?