In my div i have list of items:
<div id="itemList" class="dropdown-content">
<a value="1">item1</a>
<a value="2">item2</a>
<a value="3">item3</a>
<a value="121">item4</a>
<a value="131">item5</a>
<a value="141">item6</a>
</div>
So when i click on item3 i would like to take value(3) by JS.
yes 2019 => use event delegation... and dataset
document.querySelector('#itemList').onclick = function(evt) {
if (!evt.target.matches('a')) return;
evt.stopPropagation();
alert(evt.target.dataset.value);
}
.dropdown-content a {
display: block;
float: left;
clear: both;
margin: 1px;
padding: 2px 10px;
background-color:lightblue;
cursor: pointer;
}
<div id="itemList" class="dropdown-content">
<a data-value="1">item1</a>
<a data-value="2">item2</a>
<a data-value="3">item3</a>
<a data-value="121">item4</a>
<a data-value="131">item5</a>
<a data-value="141">item6</a>
</div>
Related
We have on the product price and sale price
Both classes have width: 50% and inline-block.
I want to write a script that changes style (add class for width 100% and change font style) to the price when there is no sale price.
This is what I tried so far.
This is first code:
jQuery(document).ready(function($) {
if( $('.eg-top-ponudbe-content-element-28').html().trim().length === 0) {
$('.eg-top-ponudbe-content-element-28').hide();
$('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
}
});
This is second code:
jQuery(document).ready(function($) {
if( $('.eg-top-ponudbe-content-element-28').is(':empty')) {
$('.eg-top-ponudbe-content-element-28').hide();
$('.eg-top-ponudbe-content-element-24').addClass('change_regular_price');
}
});
And also doesn't work because is hiding sale price on all product (also products with sale price )
HTML is:
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a></div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a></div>
</div>
</div>
You have to iterate through every price_div, and find the regular and sale pairs inside of that and then you could update them independent of other price divs. something line:
$(".price_div").each(function(_ix, el) {
var $priceDiv = $(el):
var $regularPrice = $priceDiv.find(".eg-top-ponudbe-content-element-28");
var $salePrice = $priceDiv.find(".eg-top-ponudbe-content-element-24");
if( $regularPrice.is(':empty')) {
$regularPrice.hide();
$salePrice.addClass('change_regular_price');
}
})
You can use jQuery to select the empty sale_price items with $('.sale_price:empty') and then loop through the results by adding a .each()
$('.sale_price:empty').each(function() {
$(this).hide();
$(this).parent().find('.regular_price').addClass('change_regular_price');
})
.sale_price {
width: 50%;
background: red;
float: left;
}
.regular_price {
width: 50%;
background: blue;
float: left;
}
.regular_price.change_regular_price {
width: 100%;
background: green;
float: left;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class='sale_price'>
$5.00
</div>
<div class='regular_price'>
$7.00
</div>
</li>
<li>
<div class='sale_price'></div>
<div class='regular_price'>
$8.00
</div>
</li>
<li>
<div class='sale_price'>
$15.00
</div>
<div class='regular_price'>
$17.00
</div>
</li>
</ul>
jQuery(document).ready(function($) {
$( ".price_div" ).each(function() {
var regular_price = $(this).find('div:first-child');
var sale_price = $(this).find('div:last-child');
if( sale_price.find('a').html().trim().length === 0) {
sale_price.hide();
regular_price.addClass('change_regular_price');
}
});
});
.price_div {
margin-bottom: 20px;
width: 600px;
height: 40px;
border: 1px solid #ccc;
}
.price_div div {
display: inline-block;
width: 50%;
height: 40px;
line-height: 40px;
float: left;
text-align: center;
}
.change_regular_price {
width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
</div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self">sale_price 1.100 €</a>
</div>
</div>
<div class="price_div">
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-28-a">
<a class="eg-top-ponudbe-content-element-28 eg-post-903" href="javascript:void(0);" target="_self">regular_price 1.200 €</a>
</div>
<div class="esg-content eg-post-903 eg-top-ponudbe-content-element-24-a">
<a class="eg-top-ponudbe-content-element-24 eg-post-903" href="javascript:void(0);" target="_self"></a>
</div>
</div>
Use this jsFiddle instead of Stack Snippet
$(".dropdown li a").dblclick(function(){
//alert('Long pressed');
$(this).parent().toggleClass('selected');
if ($('.dropdown li').hasClass('selected')) {
// alert('1 Item selected');
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('.dropdown-title').addClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').removeClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').addClass('show');
}
else {
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('span').removeClass('hide');
$('.delete').removeClass('show');
$('.delete').addClass('hide');
// alert('1 Item dis selected');
}
});
$('a#deletelibtn').click(function () {
// body...
// alert('deletelibtn clicked')
$(this).parent().parent().find('.selected').remove();
$(this).parent().find('.dropdown-title').removeClass('hide');
$(this).parent().find('.dropdown-title').addClass('show');
})
/*Dropdown Messages*/
.messages-dropdown{
width: 300px;
}
.messages-dropdown .header{
padding: 15px;
border-bottom: 1px solid #ccc;
}
.messages-dropdown .header small{
float: right;
}
.messages-dropdown .header small a{
font-style: 9px;
margin-left: 5px;
}
.messages-dropdown .footer{
text-align: center;
border-top: 1px solid #ccc;
}
.messages-dropdown .footer a{
padding: 15px;
}
.messages-items{
list-style: none;
padding: 0;
padding-left: 0px;
margin: 0;
}
.messages-items .Mitem {
padding: 10px;
padding-left: 10px;
border-left: 3px solid transparent;
}
.messages-items .Mitem:hover {
background: #f0f0f0;
border-color: #3a3f51;
}
.messages-items .Mitem a {
display: inline-block;
width: 100%;
}
.messages-items .Mitem a:hover {
text-decoration: none;
background: #f0f0f0;
}
.messages-items .Mitem a b{
color: #444;
letter-spacing: 1px;
}
.messages-items .Mitem a small{
color: #999;
letter-spacing: 1px;
}
.messages-items .Mitem img{
float: left;
margin-right: 10px;
border-radius: 100% !important;
padding: 5px;
border: 1px solid #ccc;
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-li-envelope message-bell"></i>
<span class="badge message-badge">4</span>
</a>
<ul class="dropdown-menu messages-dropdown">
<li class="header">
<span class="dropdown-title">
heading
</span>
<a class="#delete" id="deletelibtn">
delete
</a>
</li>
<div id="message">
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
When I select the messages the deletelibtn option is enabled and I'm able to delete the messages, but after deleting the messages the deletelibtn button is not hiding and then again if am selecting the messages again the delete option is not showing.
When the deletelibtn option is showing the dropdown-title should be hidden, similarly when the dropdown-title is visible the deletelibtn button should be hidden.
I hope I explained what I need exactly.
I changed several little things which wouldn't affect functionality but are 'best practice'. There were a couple of small targeting issues as well which are what caused the functional problem. The reason it was so hard to debug is because your html was a but jumbled and you reused the same words over and over making it hard to follow the logic. Here is the corrected js.
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$("ul.messages-items a").dblclick(function(){
$(this).closest('ul.messages-items').parent().addClass('selected');
var $container = $(this).closest('div.container-fluid')
if ($('li.dropdown').hasClass('open')) {
$container.find('.header').find('.dropdown-title').removeClass('show').addClass('hide');
$container.find('.deleteli').removeClass('hide').addClass('show');
}
else {
$container.find('.header').find('span').removeClass('hide').addClass('show');
$('.delete').removeClass('show').addClass('hide');
}
});
$('a#deletelibtn').click(function () {
var $this = $(this);
$('#message').find('li.selected').remove();
$this.parent().find('.dropdown-title').removeClass('hide').addClass('show');
$this.find('i.deleteli').removeClass('show').addClass('hide');
})
https://jsfiddle.net/xctgo71x/23/
You can add this off-click event to reset the dropdown.
$(document).click(function(e){
//console.log(e);
if(true)
ResetDropdown();
});
function ResetDropdown(){
$('span.dropdown-title').removeClass('hide').addClass('show');
$('i.deleteli').removeClass('show').addClass('hide');
$('#message').find('li.selected').removeClass('selected');
}
It works ok on the jsfiddle but on your actual code you may need to tweak it a little.
https://jsfiddle.net/xctgo71x/29/
I want to have a single type of dropdown in the whole website that behaves in a certain way:
it must open on click
it must stay open when i click inside the block that shows
it must close if i click outside of the opened block
it must close if i click again on the title * which opened the dropdown
if i click on a new dropdown, any existing opened dropdown must close
As you can see in my demo, i have all the features working except last one which works ok only partial.
If you click on dropdown 1 and than on dropdown 2, all is perfect. New one that opens will close the old one which was already opened.
Now, open again dropdown 1 (from header) and after this, click to open dropdown 3 or 4 (which are in footer area) and you will see that the dropdown from header will remain opened.
Any solution to fix this? So same type of dropdown, when opened, must close previous opened drodown regardless of it's position in the webpage. Thanks
$(".dropdown").click(function(event) {
event.stopPropagation();
$(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
Slightly modified your code, you need just play with the selectors.
$(".dropdown").click(function(event) {
event.stopPropagation();
$(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
$(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
$(".dropdown-values").fadeOut(500);
$(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
$(this).siblings(".dropdown-values").fadeToggle(500);
$(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
#header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
height: 200px;
}
#footer {
height: 50px;
position: fixed;
bottom: 0;
width: 100%;
}
.dropdown {
background: #313654 none repeat scroll 0 0;
cursor: pointer;
display: inline-block;
}
.dropdown-title {
color: #fff;
display: block;
}
a {
background-color: transparent;
outline: medium none;
}
.dropdown-values {
background: #0089d7 none repeat scroll 0 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
display: none;
margin-top: 0;
padding: 10px;
position: absolute;
right: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
<div class="dropdown">
<a class="dropdown-title">dropdown 1</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 1 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 1 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 2</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 2 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 2 content</a>
</div>
</div>
</div>
</div>
<div id="content">
</div>
<div id="footer">
<div class="dropdown">
<a class="dropdown-title">dropdown 3</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 3 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 3 content</a>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-title">dropdown 4</a>
<div class="dropdown-values">
<div class="dropdown-value">
<a class="dropdown-value" href="/test5">dropdown 4 content</a>
</div>
<div class="">
<a class="dropdown-value" href="/test6">dropdown 4 content</a>
</div>
</div>
</div>
</div>
It seems to me the problem line is this:
$(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
You're only removing the activated class in the parent.
Just look for $('.dropdown') directly.
I have simple html code like this jsfiddle file which display an <a> tag named Test. What I am going to do is when I click to this tag Test, a new div with the class name surveySummaryMenu which including 2 other <a> tag named v1 Test and v2 Testshould be displayed. I do this by using CSS:
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
but i seems not working. Can anyone have an idea?
You could do something like this:
JS:
<script>
function menuButton() {
document.getElementById("menu").style.display = 'block';
}
</script>
HTML:
<div class="row" >
<ul class=" nav surveySummaryList">
<li>
<a href="javascript:" onclick="menuButton();">
<span>Test</span>
</a>
<div class="surveySummaryMenu" id="menu">
<ul class="nav navbar">
<li>
<a href="javascript:">
<i></i> v.<span>2</span>
<span>
<span>Test</span>
</span>
</a>
</li>
<li>
<a href="javascript:">
<i></i> v.<span>1</span>
<span>
<span>Test</span>
</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
CSS:
.surveySummaryList .surveySummaryList {
margin-left: 10px;
}
.surveySummaryList>.active {
padding-left: 6px;
background-color: #EEEEEE;
}
.surveySummaryList .surveySummaryMenu a {
color: white;
}
.surveySummaryList .surveySummaryMenu a:active,
.surveySummaryList .surveySummaryMenu a:visited {
background: rgba(0, 0, 0, 0.8);
}
.surveySummaryList>li .surveySummaryMenu {
background: rgba(0, 0, 0, 0.6);
position: absolute;
left: 100%;
top: 0;
display: none;
color: white;
width: 100%;
min-width: 200px;
z-index: 1001;
}
.surveySummaryList> .active >.surveySummaryMenu {
display: inherit;
}
I have jsfiddle demo.
I want to show specific div hover of specific hover.
I have made function also in that will show div on hover but it's not working.
and I am confused that how to make one function for each tag.
right now I have made only one function for that.
Code :
<a class="cart" href="#"> show </a><br>
<a class="cart1" href="#"> show1 </a><br>
<a class="cart2" href="#"> show2 </a><br>
<div class="laptop" style="position: absolute;z-index: 1;">
laptop
</div>
<div class="mobile" style="position: absolute;z-index: 1;">
mobile
</div>
<div class="shoes" style="position: absolute;z-index: 1;">
shoes
</div>
CSS :
.laptop{
display: none;
min-height: 400px;
width: 400px:
position:absolute;
background-color: black;
}
.mobile{
display: none;
min-height: 200px;
width: 200px:
position:absolute;
background-color: blue;
}
.shoes{
display: none;
min-height: 300px;
width: 200px:
position:absolute;
background-color: red;
}
JS :
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
$(this).next(".laptop").show();
}).on('mouseleave', '.cart', function () {
$(this).next(".laptop").hide();
});
});
I have updated your fiddle.
http://jsfiddle.net/K2RAt/1/
changed
$(this).next(".laptop").hide();
to
$(".laptop").hide();
This will work for you.
Add a common class to all the anchor elements like cart then add another additional data-* to specify the selector of the element to be displayed
Try
<a class="cart" data-target=".laptop" href="#"> show </a>
<br>
<a class="cart" data-target=".mobile" href="#"> show1 </a>
<br>
<a class="cart" data-target=".shoes" href="#"> show2 </a>
then
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
$($(this).data('target')).show();
}).on('mouseleave', '.cart', function () {
$($(this).data('target')).hide();
});
});
Demo: Fiddle
You can try this :
<a>Hover</a>
<div>To be shown</div>
CSS
div {
display: none;
}
a:hover + div {
display: block;
}
I have just updated your fiddle
http://jsfiddle.net/K2RAt/4/
Only need $(".laptop").show();
Simply use:
$( ".cart1" ).mouseover(function(){
$('.laptop').show();
});
Demo: Fiddle
I prefer CSS only...
Assuming HTML4, with this markup:
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
You can do something like this:
div {
display: none;
}
a:hover + div {
display: block;
}
Demo: http://jsfiddle.net/z6tL9
Working Fiddle
:
[HTML:
<ul id="menu" class="menu">
<li>
Home
</li>
<li id="menu1" class="menu-link">
LINK1
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
LINK2
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
LINK3
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
LINK4
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}][2]
You can put a custom attribute in anchor tag with target Div Id like :
<a class="cart" href="#" target_id='laptop'> show </a><br>
And then use following script :
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
var cl = $(this).attr('target_id');
jQuery('div.'+cl).show()
}).on('mouseleave', '.cart', function () {
var cl = $(this).attr('target_id');
jQuery('div.'+cl).hide();
});
});
Here is the demo : http://jsfiddle.net/jn9eT/1/
Hope, it solves your problem.
Add a common class to all the anchor elements like cart then add another additional data-* to specify the selector of the element to be displayed
Try this : -
<a class="cart" data-target=".laptop" href="#"> show </a>
<br>
<a class="cart" data-target=".mobile" href="#"> show1 </a>
<br>
<a class="cart" data-target=".shoes" href="#"> show2 </a>
then after : -
$(document).ready(function () {
$(document).on('mouseenter', '.cart', function () {
$($(this).data('target')).show();
}).on('mouseleave', '.cart', function () {
$($(this).data('target')).hide();
});
});
Show this demo
You can rather use: -
$(document).ready(function () {
$('.cart').hover(function(){
$(".laptop").show();
})
});