I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.
I have my code like that right now: https://jsfiddle.net/49rcfg0t/
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.topmenu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.topmenu a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<link rel="stylesheet" type="text/css" href="portfolio2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Menu superior-->
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I have the following problems:
When I scroll manually the elements are not activated.
When I use the links the elements are activated but they do not
answer to the anchor petition.
I also I would like, when I activate one of the elements of the
menu, to change the image with another one. For example, change the
first icon with this one:
Thank you in advance, this problem is driving me crazy!
You may simplify your code:
use mousemove/mouseenter instead of scroll event.
The snippet:
$(document).ready(function () {
$('a[href^="#"].topmenu').on('click', function (e) {
$('a.topmenu').removeClass('active');
$(this).addClass('active');
});
});
$(document).on('mousemove mouseenter', 'div.cuerpo div', function(event) {
$('a.topmenu').removeClass('active');
$('a[href="#' + this.previousElementSibling.id + '"].topmenu').addClass('active');
});
$(document).on('keyup', function (e) {
var charCode = (e.which) ? e.which : e.keyCode;
if ((charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101)) {
$('a[href="#anchor' + String.fromCharCode(charCode) + '"].topmenu').trigger('click');
$(document).scrollTop( $('#anchor' + String.fromCharCode(charCode)).offset().top);
}
});
body{
margin:0;
font-family:'Open Sans', sans-serif;
}
div{
overflow: auto;
}
/*Menu de cabecera*/
.header{
margin:auto;
background-color: white;
text-align: center;
position: fixed;
width:100%;
padding-top:7px;
padding-bottom: 7px;
z-index:5;
border-bottom:solid 2px #5882FA;
}
.header a{
text-decoration:none;
}
.topmenu img{
width:50px;
height:50px;
border-radius:90px;
padding: 2px 2px 2px 2px;
margin:2px 5px 17px 5px;
}
.topmenu img:active{
transform: translateY(4px);
}
.topmenu img:hover{
box-shadow:0px 2px 1px #5882FA;
}
/*Tooltips*/
.topmenu span{
visibility:hidden;
width: 120px;
color: white;
background-color: black;
text-align: center;
border-radius: 6px;
padding: 2px 0;
margin:1px;
font-variant: small-caps;
text-decoration:none;
/* Position the tooltip */
position: absolute;
top: 70%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
}
.topmenu:hover span{
visibility:visible;
opacity: 1;
}
.active{
background-color:black;
}
.cuerpo{
position: absolute;
width: 100%;
margin-top:90px;
}
.cuerpo div{
height: 590px;
margin: 5px 15%;
}
.anchor{
display: block;
height: 90px;
margin-top: -90px;
visibility: hidden;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
Related
I tried the following JavaScript/jQuery code to change the border thickness.
But this is not working. Please help me.
//$("span").css({"border":"4px solid green"});
document.getElementById("192.168.42.151:8984_solr").getElementsByClassName("trees_shard1_replica_n1").find("span").style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
Mirror: https://jsfiddle.net/amitkushwaha1710/asdxfc94/44/
Problem in your id attribute, id="192.168.42.151:8984_solr
id attribute must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods (".").
change it and it will work.
you can do something like
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
$('.card-body').find(".trees_shard1_replica_n1").find("span").css({'color':'red'});
Your code is wrong, Basically It's a mix between jquery and javascript.
Try this: (No jquery required)
document.getElementsByClassName("trees_shard1_replica_n1")[0].querySelector('span').style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
You can not find an element by find() in javascript so you can go the following way
//$("span").css({"border":"4px solid green"});
var solrId = document.getElementById("192.168.42.151:8984_solr").getElementsByClassName('trees_shard1_replica_n1')[0];
solrId.getElementsByTagName("span")[0].style.borderWidth = "thick";
.card {
position: relative;
display: inline-block;
margin: 10px;
}
.card a {
padding-right: 8px;
}
.card a span {
border-radius: 1.25rem;
border: 1px solid green;
}
.card a .replicaActive {
color: transparent;
background-color: transparent;
}
.card a .replicaLeader {
background-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="card-body" id="192.168.42.151:8984_solr">
<a href="#" class="trees_shard1_replica_n1">
<span class="badge replicaActive">0</span>
</a>
</div>
</div>
<div class="card">
<div class="card-body" id="192.168.1.4:8983_solr">
<a href="#" class="trees_shard1_replica_n3">
<span class="badge replicaLeader">0</span>
</a>
</div>
</div>
Hope This will help.
var replicaNodeName="192.168.42.151:8984_solr";
$(document.getElementById(replicaNodeName)).find(".trees_shard1_replica_n1").find("span").css({'border':'4px solid green'});
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>
Hi I'm trying to learn how to select image and I've done this so far. I just don't get how to select 2 image at the same time because I already tried removing .removeClass('selected'); in the images_list li function.
HTML:
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>
CSS
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
JS: here's my JS where I'm having a problem with. I hope somebody can help me, Thanks!
$('.images_list li').click(function() {
$('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
you can see my fiddle here: http://jsfiddle.net/jasonc21/59swswz7/
Simply comment out the removeClass line entirely.
$('.images_list li').click(function() {
// Left the following in, in case later you want to make it single again.
// $('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>
Just like the title says, I have an element that shouldn't be fading but is. The element in question is text on top of an image that fades when you move your mouse over it.
HTML:
<div id="image-wrapper">
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210" />
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
jQuery
$(document).ready(function () {
$('.fade').mouseenter(function (ev) {
$(this).fadeTo(150, 0.5);
$(this).find('img').siblings().fadeIn(150);
}).mouseleave(function () {
$(this).fadeTo(150, 1);
$(this).find('img').siblings().fadeOut(150);
});
});
Fiddle: https://jsfiddle.net/oLckb6h3/4/
A suggestion:
HTML
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<div class="doFade"> </div>
<div class="info">
<h3 class="bio bio-header">Header</h3>
<p class="bio bio-footer">Information</p>
</div>
<img src="http://placehold.it/158x210"/>
</div>
</li>
</ul>
</div>
CSS
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
position: relative;
}
.doFade {
position: absolute;
left: 0;
background: #fff;
top: 0;
right: 0;
bottom: 0;
opacity: 0.5;
display: none;
}
.info {
position: absolute;
left: 0;
background: transparent;
top: 0;
right: 0;
bottom: 0;
display: none;
}
jQuery
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$('.doFade', this).add( $('.info', this) ).fadeIn(150);
}).mouseleave(function() {
$('.doFade', this).add( $('.info', this) ).fadeOut(150);
});
});
DEMO
Fade the img rather than the .fade element...
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150);
}).mouseleave(function() {
$(this).find('img').fadeTo(150, 1).siblings().fadeOut(150);
});
});
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.bio-header {
margin-top:-150px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210"/>
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
</div>
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();
})
});