I tried to implement Tab controls. However, when I run the page, the 1st instance will have all the fields from other tabs visible in the 1st tab itself. If I click on 2nd tab and then comeback to 1st tab, I works as expected.
View:
<style>
.tabs {
height: 1475px; width: 100%; text-align: left; }
.tab-nav-wrapper {
width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }
.tabs ul {
display: block; overflow-y: hidden; margin: 0px; }
.tabs ul li {
display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }
.tabs ul li.active {
border: 1px solid black; border-bottom: 3px solid white; }
.tabs ul li a {
text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }
.tab-content-wrapper {
position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }
.tab-content {
display: block; height: 700px; width: 100%; }
</style>
<body>
<div class="tabs">
<div class="tab-nav-wrapper">
<ul>
<li id="tab1Section" class="active">Corporation Details</li>
<li id="tab2Section">Contact Information</li>
<li id="tab3Section">Documents</li>
</ul>
</div>
<div class="tab-content-wrapper">
<div id="tab1" class="tab-content">
Content 1
</div>
<div id="tab2" class="tab-content">
Content 2
</div>
<div id="tab3" class="tab-content">
Content 3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".tab-nav-wrapper li").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(".tab-nav-wrapper li").removeClass("active");
$(this).addClass("active");
var target = $(this).find("a").attr("href");
$(".tab-content-wrapper").find(".tab-content").hide();
$(".tab-content-wrapper").find(target).show();
})
});
</script>
Below is the result I have. As you can see, last field in the tab 1 is the button. But, I am getting that Tab 2 connect below that and tab 3 content after tab 2.
When I click on tab 2 and comeback to tab 1, it works as expected.
Can someone, help me with this please?
Change to
.tab-content {
display: none;
height: 700px;
width: 100%; }
.tab-content + .tab-content{
display: none;
It should hide all tabs but first one.
than your script will activate necessary tab
Related
I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error
You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.
I am trying to implement vertical tabs using JQuery. I have been able to create vertical tabs as I require but the content which I want to show for each tab is all getting displayed in one tab only. Here is the fiddle I have created -
https://jsfiddle.net/z5uq0ppd/
The code is as such -
$(function() {
$("#Configuration").tabs();
});
.side-tabs {
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.side-tabs:after {
display: block;
clear: both;
content: '';
background-color: #333;
}
.side-tabs li {
float: left;
}
.side-tabs a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.side-tabs a:hover {
background-color: #4CAF50;
}
<div id="Configuration" style="width:100%;height:100%">
<div class="side-tabs">
<ul>
<li class="active" id="09">Home</li>
<li id="10">Add Channel</li>
<li id="11">Add Device</li>
<li id="12">Add Device Type</li>
<li id="13">Display Device Tree</li>
</ul>
</div>
<div style="float:right;width:78%;height:100%; border:1px solid black;">
<div id="ConfigurationPage" style="padding:10px; width:100%; height:100%;">Welcome to Configurations.</div>
<div id="addDevicePage" style="padding:10px; width:100%; height:100%;">Add Device Page.</div>
<div id="addChannelPage" style="padding:10px; width:100%; height:100%;">Add Channel Page.</div>
<div id="addDeviceTypePage" style="padding:10px; width:100%; height:100%;">Add Device Type page.</div>
<div id="DisplayDeviceTreePage" style="padding:10px; width:100%; height:100%;">Device Tree</div>
</div>
</div>
I have implemented horizontal tabs successfully and was doing verticals the same way. However, it doesn't seem to work.
I've recently implemented this HTML, CSS and jQuery code from MegaDrop. Like any dropdown menu, it's supposed to show all the links when you hover over it.
Please hover on Products to see the result.
The problem starts when you hover away and when you hover again before the animation is finished, it will cut the height and remembers that. It will also not respond after you hover on and off a couple of times. Which is odd.
I've set no height in the container. I just let it render natively since the links have padding.
The container has overlay: hidden as well.
To enable the jQuery animation I need to remove display: block from .nav > li:hover > div
My question is, how do I prevent this? Do I need to give more instructions to the jQuery itself in order to retain the height of the container and not to shorten it?
This is the site:
http://planet.nu/dev/test/index.html
Here are my HTML, CSS and Javascript:
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>
Ah! Looks like animate leaves some residual values in your div when its interrupted (inspections using firebug clearly shows this). Clearing it up before you start the animation should fix it.
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').attr("style","").stop().slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}
.nav {
background: #666;
border-radius: 3px;
width: 960px;
margin: 20px auto;
height: 43px;
}
.nav li { list-style: none; }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
border-right: 1px solid #777;
border-left: 1px solid #555;
height: 43px;
}
.nav > li:hover > a { background: #555; border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }
/* MEGA DROP DOWN */
.nav > li > div {
position: absolute;
left: 0;
top: 43px;
display: none;
background: #fff;
padding: 10px 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }
/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}
/* 1 Column */
.container-1 { width: 170px; }
.container-1 .col1 { width: 100%; }
/* 2 Column */
.container-2 { width: 270px; }
.container-2 .col1 { width: 50% }
.container-2 .col2 { width: 100% }
/* 3 Column */
.container-3 { width: 400px; }
.container-3 .col1 { width: 33.33% }
.container-3 .col2 { width: 66.66% }
.container-3 .col3 { width: 100% }
/* 4 Column */
.container-4 { width: 500px; }
.container-4 .col1 { width: 25%; }
.container-4 .col2 { width: 50% }
.container-4 .col3 { width: 75% }
.container-4 .col4 { width: 100% }
/* 5 Column */
.container-5 { width: 600px; }
.container-5 .col1 { width: 20%; }
.container-5 .col2 { width: 40% }
.container-5 .col3 { width: 60% }
.container-5 .col4 { width: 80% }
.container-5 .col5 { width: 100% }
/* HIGHLIGHTS */
.container-3 .highlighted {
width: 400px;
margin-left: -20px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
width: 500px;
margin-left: -10px;
padding: 20px;
background: #e4fbff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mega Drop Down</title>
<link rel="stylesheet" href="css/megadrop.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<ul class="nav clearfix animated">
<li>Home</li>
<li>
Products
<div class="container-4">
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col1">
<h3>Vegetables</h3>
<ul>
<li>Tomatoes</li>
<li>Squash</li>
<li>Zucchini</li>
<li>Cucumbers</li>
<li>Green Beans</li>
<li>Lima Beans</li>
</ul>
</div>
<div class="col1">
<h3>Fruits</h3>
<ul>
<li>Apples</li>
<li>Blueberries</li>
<li>Cranberries</li>
<li>Raspberries</li>
<li>Strawberries</li>
</ul>
</div>
<div class="col2">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
<div class="col4 highlighted">
<h3>SALE: Buy one get one FREE</h3>
<p>All of our products are buy one get one free until April 1, 2013.</p>
</div>
<div class="col4">
<h3>Quality Guaranteed</h3>
<p>We stand behind our products and guarantee you will get high quality products.</p>
</div>
</div>
</li>
<li>Blog</li>
<li>Donate</li>
<li>
About
<div class="container-1 right">
<ul>
<li>Who We Are</li>
<li>Why We Care</li>
<li>Some other page</li>
<li>How We Work</li>
</ul>
</div>
</li>
<li>Locations</li>
<li>Contact Us</li>
</ul>
</body>
</html>
I don't know enough about JavaScript to explain the intricate details, but you have to pass parameters to the stop() method to make the previous animation complete.
$(function(){
$('.animated > li').hover(function(){
$(this).find('div[class^="container-"]').stop(null, true).slideDown('fast');
},
function(){
$(this).find('div[class^="container-"]').stop().slideUp('slow');
});
});
I am attempting to make a tabbed "table" of sorts but I am having trouble making it display the information.
$(document).ready(function() {
$('#orenk ul a').click(function() {
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
('.' + $(this).attr('id') + '_content').html()
);
});
});
body,
html,
div,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: arial;font-size:12px; color:#222;}
.clear {
clear: both;
}
a img {
border: none;
}
ul {
list-style: none;
position: relative;
z-index: 2;
top: 1px;
border-left: 1px solid #f5ab36;
}
ul li {
float: left;
width: 12.5%;
}
ul li a {
background: #ffd89b;
color: #222;
display: block;
padding: 6px 0px;
text-decoration: none;
border-right: 1px solid #f5ab36;
border-top: 1px solid #f5ab36;
border-right: 1px solid #f5ab36;
text-align: center;
}
ul li a.selected {
border-bottom: 1px solid #fff;
color: #344385;
background: #fff;
}
h1 {
display: block;
width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
}
#orenk {
width: 900px;
margin: 0 auto;
}
#tabs {
width: 900px;
margin: 0 auto;
}
#content {
width: 900px;
margin: 0 auto;
height: 270px;
background: #fff;
z-index: 1;
text-align: center;
margin-bottom: 20px;
}
<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
ORENK PROVINCE
</div>
<div id="orenk">
<ul>
<li>ORENK PROVINCE
</li>
<li>Glass Shores
</li>
<li>Torrid Terrain
</li>
<li>Muculent Plains
</li>
<li>Ambrosial Marsh
</li>
<li>Viscid Expanse
</li>
<li>Opulent Retreat
</li>
<li>Reedy Knolls
</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="orenk_changer">
<img src="http://placehold.it/900x270">
</div>
<div id="glass_content" style="display: none;">Glass content test</div>
<div id="torrid_content" style="display: none;">torrid content test</div>
<div id="plains_content" style="display: none;">plains content test</div>
<div id="marsh_content" style="display: none;">marsh content test</div>
<div id="expanse_content" style="display: none;">expanse content test</div>
<div id="Opulent_content" style="display: none;">opulent content test</div>
<div id="knolls_content" style="display: none;">knolls content test</div>
</div>
I am VERY new to javascript and I can get it to display the id where I want the content but when I attempt to get it to show the html inside the container I am trying to call, it does nothing. It's incredibly frustrating. Any one care to point out what I am doing wrong and how to fix it?
jsBin demo
Two things wrong with your ('.' +
$('.' + ›missing $
$('#' + ›you need to target # (Id) elements, not .(class)
$('#orenk ul a').click(function( evt ) {
evt.preventDefault();
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
$('#'+ this.id +'_content').html() // missing $ and # instead of .
);
});
Also, a href="#" (instead of a href="javascript:void(0);") is quite enough if than inside JS you do Event.preventDefault()
I want to cause an overlay on mouseover for my three images. I believe it will be best to use jQuery after creating a div. However, when I add a new div to my layout (below each of the <img> in my code) My layout is screwed up; goes from horizontal list to vertical list if i try to add in any <div> below my <img>.
I mainly want the overlay just sitting there. Im sure I can figure out mouseover action, but main issue is I cannot generate initial overlay
stackoverflowers: please help me add in an overlay div that will ultimately be transparent.
home.html I have commented out my attempt at placing overlay divs
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
PROGRAM
<ul id="programDrop">
<li><a href='#'>INSPECTIONS</a></li>
<li><a href='#'>SOFTWARE</a></li>
<li><a href='#'>SAVINGS</a></li>
</ul>
</li>
<li>LOGIN
<ul id="loginDrop">
<li><a href='#'>TECHNICIAN LOGIN</a></li>
<li><a href='#'>CUSTOMER LOGIN</a></li>
</ul>
</li>
<li>ABOUT</li>
</ul>
</div>
<div id="midMain">
<div class="circularImg">
<img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.contemporist.com/photos/e4delmar.jpg"/>
<!-- <div class="overlay"></div> -->
<img src="http://www.rkmheatingandair.com/service-tech2.jpg"/>
<!-- <div class="overlay"></div> -->
</div>
</div>
</body>
</html>
stylesheet.css
body {
margin: 0;
}
.header {
background-color: white;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
font-size: 1rem;
}
#headerMenu > li {
display: inline-block;
}
#headerMenu > li:nth-child(1) {
color:red;
}
#headerMenu li a {
text-decoration: none;
color: black;
margin: 2rem;
padding: 0;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#programDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#programDrop li a{
color: black;
text-align: left;
list-style: none;
}
/* Sub Menu for Link Two */
#loginDrop {
text-decoration: none;
list-style: none;
display: block;
visibility: hidden;
padding-left: 0;
text-align: left;
position:absolute;
}
#loginDrop li a{
color: black;
text-align: left;
}
/* Photos on home page */
#midMain {
border: 1px solid red;
background-color: white;
text-align: center;
}
.circularImg {
overflow: hidden;
display: inline-block;
margin: auto;
padding: 0;
}
/* Removed code because nothing works as of yet */
.overLay {
}
/* Sets img imports as circular by default */
img {
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
opacity: .5;
}
included jQuery script.js
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(1)').mouseenter(function() {
$('#programDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(1)').mouseleave(function() {
$('#programDrop').css('visibility','hidden');
});
});
jQuery(document).ready(function() {
$('#headerMenu > li:nth-child(2)').mouseenter(function() {
$('#loginDrop').css('visibility','visible');
});
$('#headerMenu > li:nth-child(2)').mouseleave(function() {
$('#loginDrop').css('visibility','hidden');
});
});
As per comments
CSS
.overlay {
background:black;
border-radius: 50em;
min-height: 10em;
height: 18em;
width: 18em;
min-width: 10em;
margin: 3rem;
position:relative;
}
HTML
<div class="overlay"><img src="http://media.treehugger.com/assets/images/2011/10/ice-energy-store.jpg"/></div>
CODE
$(document).on("mouseover", "img", function() {
$(".overlay").css({"z-index": "999"});
$("img").css("opacity",".5");
});
Demo
http://jsfiddle.net/79zty3h7/