页脚中断不透明度过渡效果 CSS
Footer interrupting opacity transition effect CSS
我的页脚元素有两个问题：
1) 我终于让它贴在每一页的底部，但是，
2) 一旦我这样做了，我在 div class=sectionalblock 中的不透明度过渡效果就无法工作。如果我摆脱我的页脚，那么它会继续工作。当我切换到绝对定位时，它会停留在我的页面顶部。
有人知道如何解决这个问题吗？我知道这与定位是相对还是绝对有关，但是当我尝试绝对定位时，它只是拒绝粘在每个页面的底部，并且不会根据页面大小自行调整。
html
{
min-width: 100%;
min-height: 100%
}
body
{
margin:0;
padding:0;
max-width:100%;
overflow-y: scroll;
overflow-x: hidden; /*Disable horizontal scrollbar*/
}
#background /*Background image*/
{
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
z-index: -4;
opacity: .5;
}
*
{
font-family: 'Roboto', Tahoma, Arial;
}
header
{
background-color: #144762; /*VIU colours*/
padding: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
}
input[name=search] /*Search bar*/
{
width: 300px;
height: 16px;
right: 20px;
position: absolute;
top: 255px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('../Images/searchicon.png');
background-position: 8px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
z-index: 1;
}
#logo
{
float: left;
top: 40px;
left: 40px;
position: absolute;
}
h1
{
margin-left: 500px;
color: #FFFFFF;
}
/*Sectional blocks*/
section
{
margin: 40px 23px;
width: 100%;
}
div.sectionalblocks
{
float:left;
display:inline-block;
position:relative;
z-index: -4;
width: 400px;
height: 400px;
}
div.sectionalblocks img /*Image underneath sectional blocks*/
{
width:400px;
height:400px;
display:block;
float:left;
position: relative;
}
#articleimage /*Image underneath article*/
{
position: absolute;
z-index: -3;
filter: brightness(80%);
opacity: 0.8;
}
#articlepreview /*Text inside article sectional blocks*/
{
position: relative;
float: left;
height: 400px;
width: 360px;
padding: 20px;
display: inline-block;
vertical-align: middle;
color: white;
}
#articlepreview h2 /*Header text inside article sectional blocks*/
{
text-decoration: underline;
color: white;
}
span.text-content /*Text inside sectional blocks*/
{
float:left;
position:absolute;
height:400px;
width:400px;
font-family:"proxima nova",sans-serif;
font-style: normal;
font-weight: 300;
font-size: 30px;
letter-spacing: 4px;
background: rgba(0,0,0,0.3);
color: white;
cursor: pointer;
display:table;
opacity:0;
z-index:5;
padding:0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content:hover
{
opacity:1;
}
iframe.likebutton
{
position: absolute;
left: 10px;
bottom: 0;
z-index: 5;
}
div.sectionalblocks iframe {
position: absolute;
left: 15px;
bottom: 0px;
}
/*Footer*/
#validator
{
clear: both;
z-index: -1;
}
/*Extra test stuff*/
/*Navigation Menu, <nav>*/
#menu /*entire box*/
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;/*#444 the Navigator nav color*/
padding: 0;
position: absolute;
width: 100%;
left: 0;
margin: 0;
height: 35px;
}
#menu li /*text box*/
{
margin-right: 3px;
border: 1px solid #ecffec;
position: relative;
list-style: none;
float: left;
padding: 0;
line-height: 15px;
font-weight: bold;
top: 16%;
}
#menu ul /*Actual dropdown menu*/
{
position: absolute;
left: 0;
display: none;
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0;
margin: 0;
float: left;
line-height: 15px;
width: auto;
}
#menu ul li /*text inside dropdown menu*/
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
min-width: 150px;
}
#menu a:link, #menu a:visited, #menu label
{
display: block;
font-family: 'Roboto', Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
font-size: 15px;
}
#menu li:hover, #menu input:checked + label {
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul,
#menu input:checked ~ ul {
display: block;
}
#menu input {
display: none;
}isited, #menu label { display: block; font-size: 15px; font-weight: bold; text-align: left; text-decoration: none; color: #000; padding: 5px; }
/*Contact information*/
#emergencycontact /*entire box, <aside>*/
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0;
position: fixed;/*added this*/
width: 120px;
right: 0;
bottom: 0;
z-index: 5;
}
#emergencycontact li /*text box*/
{
border: 1px solid #ecffec;
position: relative;
float: none;
margin: 0;
padding: 0;
line-height: 15px;
font-weight: bold;
}
#emergencycontact ul /*Actual popout window*/
{
position: absolute;
bottom: 27px;
right:0;
width: 500px;
height: 300px;
display: none;
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
float: none;
line-height: 15px;
overflow: scroll;
font-weight: normal;
overflow-y: scroll;
overflow-x: hidden; /*Disable horizontal scrollbar*/
}
#emergencycontact a:link, #emergencycontact a:visited
{
display: block;
font-size: 15px;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#emergencycontact li:hover,
#emergencycontact input:checked + label
{
background-color: #ffd98a;
border: 1px solid #000;
}
#emergencycontact li:hover ul,
#emergencycontact input:checked ~ ul
{
display: block;
}
#emergencycontact input
{
display: none;
}
#emergencycontact label
{
display: block;
padding: 5px;
}
p.underline
{
text-decoration: underline;
margin-left: 20px;
}
p.italic
{
font-style: italic;
}
.heading
{
text-align: center;
}
h4{
text-decoration: underline;
}
p.contactheading{
font-weight: bold;
}
h4, p.contactheading, p.italic, #emergencycontact p /*text inside dropdown menu*/
{
float: none;
margin: 0;
padding: 15px;
}
/*Footer*/
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 10px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -10px; /* negative value of footer height */
margin-left: 40px;
height: 10px;
top: 10px;
clear:both;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<link rel="stylesheet" type="text/css" href="CSS/template.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Website Project</title>
<meta charset="utf-8"/>
</head>
<body>
<header>
<h1>Vancouver Island University</h1>
<h1>Health and Wellness Community</h1>
<h1>"No more excuses"</h1>
<a href="index.html"><img id="logo" src="Images/VIU-logo-small.jpg" alt="VIU logo" title="VIU logo"></a>
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</header>
<img src="Images/websitebackground.jpg" id="background" alt="website background image">
<nav>
<ul id="menu">
<li><a href="Pages/about.html">About</a></li>
<li>
<input type="checkbox" id="navigation"/>
<label for="navigation" name="navigation">Events and Workshops</label>
<ul>
<li><a href="#">Upcoming Events</a></li>
<li><a href="#">Upcoming Workshops</a></li>
<li><a href="#">Request an Event or Workshop</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="navigation2"/>
<label for="navigation2" name="navigation2">Resources</label>
<ul>
<li><a href="#">All Resources</a></li>
<li><a href="#">Nutrition Resources</a></li>
<li><a href="#">Physical Activity Resources</a></li>
<li><a href="#">Mental Health Resources</a></li>
<li><a href="#">Spiritual Health Resources</a></li>
<li><a href="#">Social Health Resources</a></li>
<li><a href="#">Medical Health Resources</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<section>
<div class="sectionalblocks">
<a target="_self" href="#">
<img src="Images/blog.png" alt="Blog Article">
<span class="text-content"><span> Blog </span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<div id="articlepreview"><h2>Glorifying Exhaustion: The student crisis</h2><p>It’s that time of year again; between the midterms, papers, and looming final exams, people start to brag about how they are on their sixth extra-large triple-shot coffee, or that they pulled an all-nighter to get their paper in on time...</p></div>
<a target="_blank" href="http://www.thenav.ca/2016/11/16/glorifying-exhaustion-the-student-crisis/">
<img id="articleimage" src="Images/articleimage.jpg" alt="Resource Article">
<span class="text-content"><span>Resources</span></span>
</a><iframe id="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<a target="_self" href="#">
<img src="Images/upcomingevents.png" alt="Upcoming Events Article">
<span class="text-content"><span>Upcoming Events</span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<a target="_self" href="#">
<img src="Images/volunteer.png" alt="Volunteer Article">
<span class="text-content"><span>Volunteer</span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<a target="_self" href="http://blog.myfitnesspal.com/10-nutritious-smoothies-250-calories/">
<img src="Images/smoothies.jpg" alt="Nutrition Article">
<span class="text-content"><span>Nutrition</span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<div id="articlepreview"><h2>I Want To Be With Someone Who Knows What It’s Like To Be Broken</h2><p>When seeking a partner, most people have pretty generic things that they’re looking for. They want a man to be handsome, smart, successful, funny, kind. But most qualities that people rattle off don’t go much deeper than that. For me, there’s something rare and unconventional I’m looking for in another person. A quality that I know will mean I truly found the right partner...</p></div>
<a target="_blank" href="http://thoughtcatalog.com/kelly-bishop/2016/03/i-want-to-be-with-someone-who-knows-what-its-like-to-be-broken/">
<img id="articleimage" src="Images/mentalhealth.jpg" alt="Mental Health Article">
<span class="text-content"><span>Resources</span></span>
</a><iframe id="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</section>
<aside>
<ul id="emergencycontact">
<li>
<input type="checkbox" id="contact"/>
<label for="contact" name="contact">Contact</label>
<ul>
<h3 class="heading">Emergency Contacts</h3>
<h4>Assistance Phones</h4>
<p class="underline"><a href="https://www2.viu.ca/facilities/docs/VIU-AssistancePhones-Map.pdf">Location Map Link</a></p>
<h4>Vancouver Island University Counselling Services</h4>
<p class="italic">Monday - Friday; 8 am - 4 pm</p>
<p>Nanaimo Campus Phone: 250-740-6416</p>
<p>Cowichan Campus Phone: 250-746-3509</p>
<p>Parksville Campus Phone: 250-248-2096</p>
<p>Powell River Campus Phone: (604) 485-2878</p>
<h4>Mental Health Walk-in Clinic (Crisis Counselling)</h4>
<p class="italic">Monday - Friday; 10am - 6pm</p>
<p>Nanaimo Phone: 250-739-5710</p>
<p>Location: 203-2000 Island Highway North, Nanaimo, BC V9S 5W3</p>
<p class="underline"><a href="http://www.viha.ca/mhas/locations/nanaimo/">Island Health Website</a></p>
<h4>Vancouver Island Crisis Line</h4>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 1-888-494-3888</p>
<p class="underline"><a href="http://www.vicrisis.ca/">Crisis Line Website</a></p>
<p class="contactheading">Haven Transition House Crisis Line Support for abused women and their children</p>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 250-756-0616</p>
<h4>On Campus Emergency</h4>
<p class="contactheading">Emergency, First Aid, Security, Ambulance, Fire, Police, Bomb Threat</p>
<p class="italic">7 days a week/24 hours a day</p>
<p>Office/Internal Phone Nanaino/Cowichan Phone: 6600</p>
<p>Office/Internal Phone Powell River Phone: 8121 or 911</p>
<p>Office/Internal Phone Parksville Phone: 951-3000 or 911</p>
<p class="contactheading">Emergency Phone Push button</p>
<p>Pay Phone Nanaimo Phone: 740-6600</p>
<p>Pay Phone Cowichan Phone: 1-250-740-6600</p>
<p>Pay Phone Powell River Phone: 604-485-2878</p>
<p>Pay Phone Parksville Phone: 951-3000 or 911</p>
<h4>Off Campus Emergency</h4>
<p class="contactheading">Police, Fire, and Ambulance Services</p>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 911</p>
<h4>Nanaimo Regional General Hospital</h4>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 250-754-2141</p>
<p>Location: 1200 Dufferin Crescent, Nanaimo, BC V9S 5R6</p>
<h4>Email contact</h4>
<p class="underline">behealthy@viu.ca</p>
</ul>
</li>
</ul>
</aside>
<footer>
<div id="wrap">
<div id="header"></div>
<div id="main"></div>
</div>
<div id="footer">
<a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fmediastudies.viu.ca%2FStudents%2F577081557%2FLabs%2Flab02.html"><img src="Images/html-validator.jpg" alt="HTML validator badge"></a> | <a href="https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmediastudies.viu.ca%2FStudents%2F577081557%2FLabs%2Findex.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"><img src="Images/css-validator.gif" alt="CSS validator badge"></a>
</div>
</footer>
</body>
</html>
这是 JSFiddle 工作演示
https://jsfiddle.net/nxb8bann/4/
我设法找出了问题，这是由于 z-index。请将您的 css 更改为：
.sectionalblock:hover span{
opacity: 1;
}
和
div.sectionalblocks
{
float:left;
display:inline-block;
position:relative; /*removed z-index
width: 400px;
height: 400px;
}
这是因为 z-index 为负。 cusor 无法读取 sectionalblocks div 因为它由于 z-index 而下降。
此外，您不需要浮动绝对定位元素。例如 span.text-content.
我的页脚元素有两个问题：
1) 我终于让它贴在每一页的底部，但是，
2) 一旦我这样做了，我在 div class=sectionalblock 中的不透明度过渡效果就无法工作。如果我摆脱我的页脚，那么它会继续工作。当我切换到绝对定位时，它会停留在我的页面顶部。
有人知道如何解决这个问题吗？我知道这与定位是相对还是绝对有关，但是当我尝试绝对定位时，它只是拒绝粘在每个页面的底部，并且不会根据页面大小自行调整。
html
{
min-width: 100%;
min-height: 100%
}
body
{
margin:0;
padding:0;
max-width:100%;
overflow-y: scroll;
overflow-x: hidden; /*Disable horizontal scrollbar*/
}
#background /*Background image*/
{
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
z-index: -4;
opacity: .5;
}
*
{
font-family: 'Roboto', Tahoma, Arial;
}
header
{
background-color: #144762; /*VIU colours*/
padding: 30px;
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
}
input[name=search] /*Search bar*/
{
width: 300px;
height: 16px;
right: 20px;
position: absolute;
top: 255px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('../Images/searchicon.png');
background-position: 8px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
z-index: 1;
}
#logo
{
float: left;
top: 40px;
left: 40px;
position: absolute;
}
h1
{
margin-left: 500px;
color: #FFFFFF;
}
/*Sectional blocks*/
section
{
margin: 40px 23px;
width: 100%;
}
div.sectionalblocks
{
float:left;
display:inline-block;
position:relative;
z-index: -4;
width: 400px;
height: 400px;
}
div.sectionalblocks img /*Image underneath sectional blocks*/
{
width:400px;
height:400px;
display:block;
float:left;
position: relative;
}
#articleimage /*Image underneath article*/
{
position: absolute;
z-index: -3;
filter: brightness(80%);
opacity: 0.8;
}
#articlepreview /*Text inside article sectional blocks*/
{
position: relative;
float: left;
height: 400px;
width: 360px;
padding: 20px;
display: inline-block;
vertical-align: middle;
color: white;
}
#articlepreview h2 /*Header text inside article sectional blocks*/
{
text-decoration: underline;
color: white;
}
span.text-content /*Text inside sectional blocks*/
{
float:left;
position:absolute;
height:400px;
width:400px;
font-family:"proxima nova",sans-serif;
font-style: normal;
font-weight: 300;
font-size: 30px;
letter-spacing: 4px;
background: rgba(0,0,0,0.3);
color: white;
cursor: pointer;
display:table;
opacity:0;
z-index:5;
padding:0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content:hover
{
opacity:1;
}
iframe.likebutton
{
position: absolute;
left: 10px;
bottom: 0;
z-index: 5;
}
div.sectionalblocks iframe {
position: absolute;
left: 15px;
bottom: 0px;
}
/*Footer*/
#validator
{
clear: both;
z-index: -1;
}
/*Extra test stuff*/
/*Navigation Menu, <nav>*/
#menu /*entire box*/
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;/*#444 the Navigator nav color*/
padding: 0;
position: absolute;
width: 100%;
left: 0;
margin: 0;
height: 35px;
}
#menu li /*text box*/
{
margin-right: 3px;
border: 1px solid #ecffec;
position: relative;
list-style: none;
float: left;
padding: 0;
line-height: 15px;
font-weight: bold;
top: 16%;
}
#menu ul /*Actual dropdown menu*/
{
position: absolute;
left: 0;
display: none;
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0;
margin: 0;
float: left;
line-height: 15px;
width: auto;
}
#menu ul li /*text inside dropdown menu*/
{
float: none;
margin: 0;
padding: 0;
line-height: 15px;
min-width: 150px;
}
#menu a:link, #menu a:visited, #menu label
{
display: block;
font-family: 'Roboto', Tahoma;
font-size: 0.75em;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
font-size: 15px;
}
#menu li:hover, #menu input:checked + label {
background-color: #ffd98a;
border: 1px solid #000;
}
#menu li:hover ul,
#menu input:checked ~ ul {
display: block;
}
#menu input {
display: none;
}isited, #menu label { display: block; font-size: 15px; font-weight: bold; text-align: left; text-decoration: none; color: #000; padding: 5px; }
/*Contact information*/
#emergencycontact /*entire box, <aside>*/
{
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0;
position: fixed;/*added this*/
width: 120px;
right: 0;
bottom: 0;
z-index: 5;
}
#emergencycontact li /*text box*/
{
border: 1px solid #ecffec;
position: relative;
float: none;
margin: 0;
padding: 0;
line-height: 15px;
font-weight: bold;
}
#emergencycontact ul /*Actual popout window*/
{
position: absolute;
bottom: 27px;
right:0;
width: 500px;
height: 300px;
display: none;
list-style: none;
border: 1px solid #000;
background-color: #ecffec;
padding: 0 0 26px 0;
margin: 0;
float: none;
line-height: 15px;
overflow: scroll;
font-weight: normal;
overflow-y: scroll;
overflow-x: hidden; /*Disable horizontal scrollbar*/
}
#emergencycontact a:link, #emergencycontact a:visited
{
display: block;
font-size: 15px;
font-weight: bold;
text-align: left;
text-decoration: none;
color: #000;
padding: 5px;
}
#emergencycontact li:hover,
#emergencycontact input:checked + label
{
background-color: #ffd98a;
border: 1px solid #000;
}
#emergencycontact li:hover ul,
#emergencycontact input:checked ~ ul
{
display: block;
}
#emergencycontact input
{
display: none;
}
#emergencycontact label
{
display: block;
padding: 5px;
}
p.underline
{
text-decoration: underline;
margin-left: 20px;
}
p.italic
{
font-style: italic;
}
.heading
{
text-align: center;
}
h4{
text-decoration: underline;
}
p.contactheading{
font-weight: bold;
}
h4, p.contactheading, p.italic, #emergencycontact p /*text inside dropdown menu*/
{
float: none;
margin: 0;
padding: 15px;
}
/*Footer*/
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 10px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -10px; /* negative value of footer height */
margin-left: 40px;
height: 10px;
top: 10px;
clear:both;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<link rel="stylesheet" type="text/css" href="CSS/template.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Website Project</title>
<meta charset="utf-8"/>
</head>
<body>
<header>
<h1>Vancouver Island University</h1>
<h1>Health and Wellness Community</h1>
<h1>"No more excuses"</h1>
<a href="index.html"><img id="logo" src="Images/VIU-logo-small.jpg" alt="VIU logo" title="VIU logo"></a>
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</header>
<img src="Images/websitebackground.jpg" id="background" alt="website background image">
<nav>
<ul id="menu">
<li><a href="Pages/about.html">About</a></li>
<li>
<input type="checkbox" id="navigation"/>
<label for="navigation" name="navigation">Events and Workshops</label>
<ul>
<li><a href="#">Upcoming Events</a></li>
<li><a href="#">Upcoming Workshops</a></li>
<li><a href="#">Request an Event or Workshop</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="navigation2"/>
<label for="navigation2" name="navigation2">Resources</label>
<ul>
<li><a href="#">All Resources</a></li>
<li><a href="#">Nutrition Resources</a></li>
<li><a href="#">Physical Activity Resources</a></li>
<li><a href="#">Mental Health Resources</a></li>
<li><a href="#">Spiritual Health Resources</a></li>
<li><a href="#">Social Health Resources</a></li>
<li><a href="#">Medical Health Resources</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Volunteer Opportunities</a></li>
<li><a href="#">Blog</a></li>
</ul>
</nav>
<section>
<div class="sectionalblocks">
<a target="_self" href="#">
<img src="Images/blog.png" alt="Blog Article">
<span class="text-content"><span> Blog </span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<div id="articlepreview"><h2>Glorifying Exhaustion: The student crisis</h2><p>It’s that time of year again; between the midterms, papers, and looming final exams, people start to brag about how they are on their sixth extra-large triple-shot coffee, or that they pulled an all-nighter to get their paper in on time...</p></div>
<a target="_blank" href="http://www.thenav.ca/2016/11/16/glorifying-exhaustion-the-student-crisis/">
<img id="articleimage" src="Images/articleimage.jpg" alt="Resource Article">
<span class="text-content"><span>Resources</span></span>
</a><iframe id="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<a target="_self" href="#">
<img src="Images/upcomingevents.png" alt="Upcoming Events Article">
<span class="text-content"><span>Upcoming Events</span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<a target="_self" href="#">
<img src="Images/volunteer.png" alt="Volunteer Article">
<span class="text-content"><span>Volunteer</span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<a target="_self" href="http://blog.myfitnesspal.com/10-nutritious-smoothies-250-calories/">
<img src="Images/smoothies.jpg" alt="Nutrition Article">
<span class="text-content"><span>Nutrition</span></span>
</a><iframe class="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
<div class="sectionalblocks">
<div id="articlepreview"><h2>I Want To Be With Someone Who Knows What It’s Like To Be Broken</h2><p>When seeking a partner, most people have pretty generic things that they’re looking for. They want a man to be handsome, smart, successful, funny, kind. But most qualities that people rattle off don’t go much deeper than that. For me, there’s something rare and unconventional I’m looking for in another person. A quality that I know will mean I truly found the right partner...</p></div>
<a target="_blank" href="http://thoughtcatalog.com/kelly-bishop/2016/03/i-want-to-be-with-someone-who-knows-what-its-like-to-be-broken/">
<img id="articleimage" src="Images/mentalhealth.jpg" alt="Mental Health Article">
<span class="text-content"><span>Resources</span></span>
</a><iframe id="likebutton" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=153&layout=button_count&action=like&size=large&show_faces=true&share=true&height=46&appId" width="153" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</section>
<aside>
<ul id="emergencycontact">
<li>
<input type="checkbox" id="contact"/>
<label for="contact" name="contact">Contact</label>
<ul>
<h3 class="heading">Emergency Contacts</h3>
<h4>Assistance Phones</h4>
<p class="underline"><a href="https://www2.viu.ca/facilities/docs/VIU-AssistancePhones-Map.pdf">Location Map Link</a></p>
<h4>Vancouver Island University Counselling Services</h4>
<p class="italic">Monday - Friday; 8 am - 4 pm</p>
<p>Nanaimo Campus Phone: 250-740-6416</p>
<p>Cowichan Campus Phone: 250-746-3509</p>
<p>Parksville Campus Phone: 250-248-2096</p>
<p>Powell River Campus Phone: (604) 485-2878</p>
<h4>Mental Health Walk-in Clinic (Crisis Counselling)</h4>
<p class="italic">Monday - Friday; 10am - 6pm</p>
<p>Nanaimo Phone: 250-739-5710</p>
<p>Location: 203-2000 Island Highway North, Nanaimo, BC V9S 5W3</p>
<p class="underline"><a href="http://www.viha.ca/mhas/locations/nanaimo/">Island Health Website</a></p>
<h4>Vancouver Island Crisis Line</h4>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 1-888-494-3888</p>
<p class="underline"><a href="http://www.vicrisis.ca/">Crisis Line Website</a></p>
<p class="contactheading">Haven Transition House Crisis Line Support for abused women and their children</p>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 250-756-0616</p>
<h4>On Campus Emergency</h4>
<p class="contactheading">Emergency, First Aid, Security, Ambulance, Fire, Police, Bomb Threat</p>
<p class="italic">7 days a week/24 hours a day</p>
<p>Office/Internal Phone Nanaino/Cowichan Phone: 6600</p>
<p>Office/Internal Phone Powell River Phone: 8121 or 911</p>
<p>Office/Internal Phone Parksville Phone: 951-3000 or 911</p>
<p class="contactheading">Emergency Phone Push button</p>
<p>Pay Phone Nanaimo Phone: 740-6600</p>
<p>Pay Phone Cowichan Phone: 1-250-740-6600</p>
<p>Pay Phone Powell River Phone: 604-485-2878</p>
<p>Pay Phone Parksville Phone: 951-3000 or 911</p>
<h4>Off Campus Emergency</h4>
<p class="contactheading">Police, Fire, and Ambulance Services</p>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 911</p>
<h4>Nanaimo Regional General Hospital</h4>
<p class="italic">7 days a week/24 hours a day</p>
<p>Phone: 250-754-2141</p>
<p>Location: 1200 Dufferin Crescent, Nanaimo, BC V9S 5R6</p>
<h4>Email contact</h4>
<p class="underline">behealthy@viu.ca</p>
</ul>
</li>
</ul>
</aside>
<footer>
<div id="wrap">
<div id="header"></div>
<div id="main"></div>
</div>
<div id="footer">
<a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fmediastudies.viu.ca%2FStudents%2F577081557%2FLabs%2Flab02.html"><img src="Images/html-validator.jpg" alt="HTML validator badge"></a> | <a href="https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fmediastudies.viu.ca%2FStudents%2F577081557%2FLabs%2Findex.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"><img src="Images/css-validator.gif" alt="CSS validator badge"></a>
</div>
</footer>
</body>
</html>
这是 JSFiddle 工作演示 https://jsfiddle.net/nxb8bann/4/
我设法找出了问题，这是由于 z-index。请将您的 css 更改为：
.sectionalblock:hover span{
opacity: 1;
}
和
div.sectionalblocks
{
float:left;
display:inline-block;
position:relative; /*removed z-index
width: 400px;
height: 400px;
}
这是因为 z-index 为负。 cusor 无法读取 sectionalblocks div 因为它由于 z-index 而下降。
此外，您不需要浮动绝对定位元素。例如 span.text-content.