Currently, I am experimenting with JQuery and my goal is to have the body content of a webpage appear transparent upon loading, with the exception of one specific div that should remain opaque.
So far, this is what I've accomplished ...
<!DOCTYPE html>
<html>
<head>
<title>JQuery Experiment</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$( "#trans" ).addClass( "getTransparent" );
$( "#opaq" ).addClass( "getOpaque" );
});
</script>
<style>
body{
background-color: #F0FFFF;
}
.myClass{
height: 100px;
background-color: #4863A0;
}
.getTransparent{
opacity: 0.3;
}
.getOpaque{
opacity: 1 !important;
}
</style>
</head>
<body id="trans">
<div id="opaq" class="col-md-6 col-md-offset-3 myClass">
This section should remain completely opaque...
</div>
</body>
</html>
Upon loading the page, however, it does not produce the desired outcome. Instead, the entire page ends up being transparent, including the specified div that was intended to have an opacity of 1.
What might be missing or need adjustment in order to achieve the desired result?
Any assistance would be greatly appreciated.