Is there a way to achieve the same opacity effect on click as on mouseover? I've tried various selectors without success.
Any help on this issue would be greatly appreciated. Thank you in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass"><a href="index.html" class="nav-text">Story</a></li>
<li class="li-navclass"><a href="menu.html" class="nav-text">Menu</a></li>
<li class="li-navclass"><a href="gallery.html" class="nav-text">Gallery</a></li>
<li class="li-navclass"><a href="catering.html" class="nav-text">Catering</a></li>
<li class="li-navclass"><a href="contact.html" class="nav-text">Contact</a></li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line"><a href="index.html" class="ftr-button">Story</a></li>
<li class="vert-line"><a href="menu.html" class="ftr-button">Menu</a></li>
<li class="vert-line"><a href="gallery.html" class="ftr-button">Gallery</a></li>
<li class="vert-line"><a href="catering.html" class="ftr-button">Catering</a></li>
<li class="vert-line"><a href="contact.html" class="ftr-button">Contact</a></li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>