为什么我的图像在悬停时不透明度没有变化？
Why are my imgs not changing in opacity when hovered over?
我在将图像从 opacity: .04; 变为
opacity: 1; 悬停时。我能够用我的 a 标签实现悬停效果。但是对于我的图像，我不能。我的 css 比较长，但是我把所有的都合并了，因为我觉得问题出在内容 html 和 css 的内容，以及 css 和 html 对于横幅、导航和页脚一起出现，这就是问题所在。但我不确定是什么导致了这个问题。我想要的效果很简单。有人可以帮助我了解我哪里搞砸了吗？
我的html：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Gender Identity 3</title>
<link rel="stylesheet" href="css/style-resources.css">
</head>
<body>
<div class="container">
<header>
<a href="index.html"> <img class="banner" src="images/banner-light2.png"> </a>
</header>
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li >
<a href="index-terms.html" class="cyan">Terms</a>
</li>
<li>
<a href="index-resources.html" class="green">Resources</a>
</li>
<li>
<a href="index-media.html" class="lav">Culture</a>
</li>
<li>
<a href="index-share.html" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="terms" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
<div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
<div id="culture" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
<div id="share" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
</div><!-- End of Div-->
<!-- Testing Share Content -->
<div class="container2">
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
<div>
<a href=""> <h1> Gender
Spectrum.com </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s28.postimg.org/ku57tve0t/trevor.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="red" id="colors-content">
<div>
<a href=""> <h1> Trevor Project </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/enh4axo8r/image.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="color3" id="colors-content">
<div>
<a href=""> <h1> AAUP.COM </h1> </a>
<p> Understanding the rights and laws protecting individuals in the lgbt+ community</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div>
<!-- Testing Share Content -->
<!-- Footer -->
<footer class="info">
<a href="index.html"> Home</a> |
<a href="index-terms.html"> Terms </a> | <a href="index-media.html">Media</a> | <a href="index-share.html" > Share</a>
<p class="last-home"> | 2016 | Web Design</p>
</footer>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index-terms.js"></script>
</body>
</html>
我的css：
@font-face { font-family: "aqua";
src: url('aqua.ttf'); }
@font-face { font-family: "axis";
src: url('Axis Extrabold.otf'); }
@font-face { font-family: "atami";
src: url('Atami-Regular.otf'); }
.container {
width: 100%;
margin: 0 auto;
}
.banner{
display: block;
margin: 0 auto;
width: 100%;
min-width: 400px;
/*margin-bottom: 40px;*/
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
.gender {
padding-top: 20px;
padding-bottom: 20px;
/* background-color: black; */
margin-bottom: 20px;
}
.gender h3{
text-align: center;
color: rgb(0,0,0); /* white*/
animation: rgb infinite alternate;
animation-duration: 15s;
font-size: 2em;
}
h3{
font-family: "axis", sans-serif;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}
.content-info {
margin-top: 20px;
text-align: center;
display: block;
}
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0; }
#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px;
}
#tabwrap {
/*background: #fff;*/
overflow: hidden;
width: 100%;
max-height: 10rem;
/*min-height: 300px;*/
margin: 0 auto;
background-color: black /*rgb(255,204,254)*/;
/*box-shadow: 0 0 20px #ddd;*/
/*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden; }
#tabs li { list-style: none;
font-family: "axis", sans-serif; }
#tabs li a {
float: left;
display: block;
padding: 10px;
color: white;
width: 25%;
text-decoration: none;
text-align: center;
border-left: 1px solid #888;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
}
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
#tabs li.current a {
background: #fff;
color: #666;
}
#tabs li.current a.cyan{
background: rgb(239,91,161); /*pink*/
color: white;
}
#tabs li.current a.green{
background-color: #4AB0E4; /*blue*/
color: white;
}
#tabs li.current a.lav{
background-color: #9D248E;
color: white;
}
#tabs li.current a.teal{
background-color: #5F166B;
color: white;
}
#content > div {
clear: both;
padding: 20px;
line-height: 19px;
color: white;
display: none;
font-family: "aqua", sans-serif;
text-align: center;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 2s;
}
#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
z-index: 1;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#terms {
background-color: rgb(239,91,161); /*pink*/
}
#resources {
background-color: #4AB0E4; /*blue*/
}
#culture{
background-color: #9D248E;
}
#share {
background-color: #5F166B;
}
/* Banner and Nav info */
footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }
.last-home {
padding-top: 10px;
}
footer a {
color: black;
}
/* footer info */
.container2 {
margin: 0px;
padding: 0px;
}
.intro {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 0;
}
.pic1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.intro-img {
display: block;
margin: 0 auto;
min-width: 100%;
opacity: 0.4;
}
.intro-img:hover {
opacity: 1;
}
.wrapper {
height: 200px;
min-height: 200px;
position: relative;
padding-bottom: 0;
}
.blue {
background: #22428e;
color: #fff;
}
.red{
background: #de0e00;
color: #fff;
}
.color3 {
background: #f7c800;
color: #fff;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 330px;
padding: 0 25px;
margin-left: 3em;
}
h1 {
text-transform: uppercase;
font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
margin: 0 0 34px;
padding-top: 17px;
}
p {
margin-top: -10px;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
@media screen and (max-width: 454px) {
.wrapper {
min-height: 100px;
position: relative;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 0 25px;
margin-left: -4px;
}
.pic1 {
display: none;
}
}
由于技术上你不能悬停图像（因为 html 的结构方式），
您应该将 .intro-img:hover 更改为 .intro:hover img.intro-img
@font-face { font-family: "aqua";
src: url('aqua.ttf'); }
@font-face { font-family: "axis";
src: url('Axis Extrabold.otf'); }
@font-face { font-family: "atami";
src: url('Atami-Regular.otf'); }
.container {
width: 100%;
margin: 0 auto;
}
.banner{
display: block;
margin: 0 auto;
width: 100%;
min-width: 400px;
/*margin-bottom: 40px;*/
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
.gender {
padding-top: 20px;
padding-bottom: 20px;
/* background-color: black; */
margin-bottom: 20px;
}
.gender h3{
text-align: center;
color: rgb(0,0,0); /* white*/
animation: rgb infinite alternate;
animation-duration: 15s;
font-size: 2em;
}
h3{
font-family: "axis", sans-serif;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}
.content-info {
margin-top: 20px;
text-align: center;
display: block;
}
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0; }
#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px;
}
#tabwrap {
/*background: #fff;*/
overflow: hidden;
width: 100%;
max-height: 10rem;
/*min-height: 300px;*/
margin: 0 auto;
background-color: black /*rgb(255,204,254)*/;
/*box-shadow: 0 0 20px #ddd;*/
/*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden; }
#tabs li { list-style: none;
font-family: "axis", sans-serif; }
#tabs li a {
float: left;
display: block;
padding: 10px;
color: white;
width: 25%;
text-decoration: none;
text-align: center;
border-left: 1px solid #888;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
}
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
#tabs li.current a {
background: #fff;
color: #666;
}
#tabs li.current a.cyan{
background: rgb(239,91,161); /*pink*/
color: white;
}
#tabs li.current a.green{
background-color: #4AB0E4; /*blue*/
color: white;
}
#tabs li.current a.lav{
background-color: #9D248E;
color: white;
}
#tabs li.current a.teal{
background-color: #5F166B;
color: white;
}
#content > div {
clear: both;
padding: 20px;
line-height: 19px;
color: white;
display: none;
font-family: "aqua", sans-serif;
text-align: center;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 2s;
}
#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
z-index: 1;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#terms {
background-color: rgb(239,91,161); /*pink*/
}
#resources {
background-color: #4AB0E4; /*blue*/
}
#culture{
background-color: #9D248E;
}
#share {
background-color: #5F166B;
}
/* Banner and Nav info */
footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }
.last-home {
padding-top: 10px;
}
footer a {
color: black;
}
/* footer info */
.container2 {
margin: 0px;
padding: 0px;
}
.intro {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 0;
}
.pic1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.intro-img {
display: block;
margin: 0 auto;
min-width: 100%;
opacity: 0.4;
}
/* .intro-img:hover */
.intro:hover img.intro-img {
opacity: 1;
}
.wrapper {
height: 200px;
min-height: 200px;
position: relative;
padding-bottom: 0;
}
.blue {
background: #22428e;
color: #fff;
}
.red{
background: #de0e00;
color: #fff;
}
.color3 {
background: #f7c800;
color: #fff;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 330px;
padding: 0 25px;
margin-left: 3em;
}
h1 {
text-transform: uppercase;
font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
margin: 0 0 34px;
padding-top: 17px;
}
p {
margin-top: -10px;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
@media screen and (max-width: 454px) {
.wrapper {
min-height: 100px;
position: relative;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 0 25px;
margin-left: -4px;
}
.pic1 {
display: none;
}
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Gender Identity 3</title>
<link rel="stylesheet" href="css/style-resources.css">
</head>
<body>
<div class="container">
<header>
<a href="index.html"> <img class="banner" src="images/banner-light2.png"> </a>
</header>
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li >
<a href="index-terms.html" class="cyan">Terms</a>
</li>
<li>
<a href="index-resources.html" class="green">Resources</a>
</li>
<li>
<a href="index-media.html" class="lav">Culture</a>
</li>
<li>
<a href="index-share.html" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="terms" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
<div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
<div id="culture" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
<div id="share" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
</div><!-- End of Div-->
<!-- Testing Share Content -->
<div class="container2">
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
<div>
<a href=""> <h1> Gender
Spectrum.com </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s28.postimg.org/ku57tve0t/trevor.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="red" id="colors-content">
<div>
<a href=""> <h1> Trevor Project </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/enh4axo8r/image.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="color3" id="colors-content">
<div>
<a href=""> <h1> AAUP.COM </h1> </a>
<p> Understanding the rights and laws protecting individuals in the lgbt+ community</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div>
<!-- Testing Share Content -->
<!-- Footer -->
<footer class="info">
<a href="index.html"> Home</a> |
<a href="index-terms.html"> Terms </a> | <a href="index-media.html">Media</a> | <a href="index-share.html" > Share</a>
<p class="last-home"> | 2016 | Web Design</p>
</footer>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index-terms.js"></script>
</body>
</html>
我在将图像从 opacity: .04; 变为
opacity: 1; 悬停时。我能够用我的 a 标签实现悬停效果。但是对于我的图像，我不能。我的 css 比较长，但是我把所有的都合并了，因为我觉得问题出在内容 html 和 css 的内容，以及 css 和 html 对于横幅、导航和页脚一起出现，这就是问题所在。但我不确定是什么导致了这个问题。我想要的效果很简单。有人可以帮助我了解我哪里搞砸了吗？
我的html：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Gender Identity 3</title>
<link rel="stylesheet" href="css/style-resources.css">
</head>
<body>
<div class="container">
<header>
<a href="index.html"> <img class="banner" src="images/banner-light2.png"> </a>
</header>
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li >
<a href="index-terms.html" class="cyan">Terms</a>
</li>
<li>
<a href="index-resources.html" class="green">Resources</a>
</li>
<li>
<a href="index-media.html" class="lav">Culture</a>
</li>
<li>
<a href="index-share.html" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="terms" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
<div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
<div id="culture" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
<div id="share" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
</div><!-- End of Div-->
<!-- Testing Share Content -->
<div class="container2">
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
<div>
<a href=""> <h1> Gender
Spectrum.com </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s28.postimg.org/ku57tve0t/trevor.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="red" id="colors-content">
<div>
<a href=""> <h1> Trevor Project </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/enh4axo8r/image.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="color3" id="colors-content">
<div>
<a href=""> <h1> AAUP.COM </h1> </a>
<p> Understanding the rights and laws protecting individuals in the lgbt+ community</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div>
<!-- Testing Share Content -->
<!-- Footer -->
<footer class="info">
<a href="index.html"> Home</a> |
<a href="index-terms.html"> Terms </a> | <a href="index-media.html">Media</a> | <a href="index-share.html" > Share</a>
<p class="last-home"> | 2016 | Web Design</p>
</footer>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index-terms.js"></script>
</body>
</html>
我的css：
@font-face { font-family: "aqua";
src: url('aqua.ttf'); }
@font-face { font-family: "axis";
src: url('Axis Extrabold.otf'); }
@font-face { font-family: "atami";
src: url('Atami-Regular.otf'); }
.container {
width: 100%;
margin: 0 auto;
}
.banner{
display: block;
margin: 0 auto;
width: 100%;
min-width: 400px;
/*margin-bottom: 40px;*/
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
.gender {
padding-top: 20px;
padding-bottom: 20px;
/* background-color: black; */
margin-bottom: 20px;
}
.gender h3{
text-align: center;
color: rgb(0,0,0); /* white*/
animation: rgb infinite alternate;
animation-duration: 15s;
font-size: 2em;
}
h3{
font-family: "axis", sans-serif;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}
.content-info {
margin-top: 20px;
text-align: center;
display: block;
}
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0; }
#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px;
}
#tabwrap {
/*background: #fff;*/
overflow: hidden;
width: 100%;
max-height: 10rem;
/*min-height: 300px;*/
margin: 0 auto;
background-color: black /*rgb(255,204,254)*/;
/*box-shadow: 0 0 20px #ddd;*/
/*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden; }
#tabs li { list-style: none;
font-family: "axis", sans-serif; }
#tabs li a {
float: left;
display: block;
padding: 10px;
color: white;
width: 25%;
text-decoration: none;
text-align: center;
border-left: 1px solid #888;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
}
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
#tabs li.current a {
background: #fff;
color: #666;
}
#tabs li.current a.cyan{
background: rgb(239,91,161); /*pink*/
color: white;
}
#tabs li.current a.green{
background-color: #4AB0E4; /*blue*/
color: white;
}
#tabs li.current a.lav{
background-color: #9D248E;
color: white;
}
#tabs li.current a.teal{
background-color: #5F166B;
color: white;
}
#content > div {
clear: both;
padding: 20px;
line-height: 19px;
color: white;
display: none;
font-family: "aqua", sans-serif;
text-align: center;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 2s;
}
#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
z-index: 1;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#terms {
background-color: rgb(239,91,161); /*pink*/
}
#resources {
background-color: #4AB0E4; /*blue*/
}
#culture{
background-color: #9D248E;
}
#share {
background-color: #5F166B;
}
/* Banner and Nav info */
footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }
.last-home {
padding-top: 10px;
}
footer a {
color: black;
}
/* footer info */
.container2 {
margin: 0px;
padding: 0px;
}
.intro {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 0;
}
.pic1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.intro-img {
display: block;
margin: 0 auto;
min-width: 100%;
opacity: 0.4;
}
.intro-img:hover {
opacity: 1;
}
.wrapper {
height: 200px;
min-height: 200px;
position: relative;
padding-bottom: 0;
}
.blue {
background: #22428e;
color: #fff;
}
.red{
background: #de0e00;
color: #fff;
}
.color3 {
background: #f7c800;
color: #fff;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 330px;
padding: 0 25px;
margin-left: 3em;
}
h1 {
text-transform: uppercase;
font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
margin: 0 0 34px;
padding-top: 17px;
}
p {
margin-top: -10px;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
@media screen and (max-width: 454px) {
.wrapper {
min-height: 100px;
position: relative;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 0 25px;
margin-left: -4px;
}
.pic1 {
display: none;
}
}
由于技术上你不能悬停图像（因为 html 的结构方式），
您应该将 .intro-img:hover 更改为 .intro:hover img.intro-img
@font-face { font-family: "aqua";
src: url('aqua.ttf'); }
@font-face { font-family: "axis";
src: url('Axis Extrabold.otf'); }
@font-face { font-family: "atami";
src: url('Atami-Regular.otf'); }
.container {
width: 100%;
margin: 0 auto;
}
.banner{
display: block;
margin: 0 auto;
width: 100%;
min-width: 400px;
/*margin-bottom: 40px;*/
}
#content {
position: absolute;
z-index: 1;
width: 100%;
}
.gender {
padding-top: 20px;
padding-bottom: 20px;
/* background-color: black; */
margin-bottom: 20px;
}
.gender h3{
text-align: center;
color: rgb(0,0,0); /* white*/
animation: rgb infinite alternate;
animation-duration: 15s;
font-size: 2em;
}
h3{
font-family: "axis", sans-serif;
}
h1{
font-family: 'Poppins', sans-serif;
font-size: 2.5rem;
}
.content-info {
margin-top: 20px;
text-align: center;
display: block;
}
* { -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0; }
#wrap { width: 100%; margin: 0 auto; min-width: 300px; max-width: 2000px;
}
#tabwrap {
/*background: #fff;*/
overflow: hidden;
width: 100%;
max-height: 10rem;
/*min-height: 300px;*/
margin: 0 auto;
background-color: black /*rgb(255,204,254)*/;
/*box-shadow: 0 0 20px #ddd;*/
/*border: 1px solid #ddd;*/
}
#tabs { overflow: hidden; }
#tabs li { list-style: none;
font-family: "axis", sans-serif; }
#tabs li a {
float: left;
display: block;
padding: 10px;
color: white;
width: 25%;
text-decoration: none;
text-align: center;
border-left: 1px solid #888;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
}
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
#tabs li.current a {
background: #fff;
color: #666;
}
#tabs li.current a.cyan{
background: rgb(239,91,161); /*pink*/
color: white;
}
#tabs li.current a.green{
background-color: #4AB0E4; /*blue*/
color: white;
}
#tabs li.current a.lav{
background-color: #9D248E;
color: white;
}
#tabs li.current a.teal{
background-color: #5F166B;
color: white;
}
#content > div {
clear: both;
padding: 20px;
line-height: 19px;
color: white;
display: none;
font-family: "aqua", sans-serif;
text-align: center;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 2s;
}
#content .current { display: block }
#content p { /*margin: 0 0 20px 0;*/
z-index: 1;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
#terms {
background-color: rgb(239,91,161); /*pink*/
}
#resources {
background-color: #4AB0E4; /*blue*/
}
#culture{
background-color: #9D248E;
}
#share {
background-color: #5F166B;
}
/* Banner and Nav info */
footer.info { text-align: center; color: #888; margin: 30px 0; }
footer.info p { color: black; }
.last-home {
padding-top: 10px;
}
footer a {
color: black;
}
/* footer info */
.container2 {
margin: 0px;
padding: 0px;
}
.intro {
width: 100%;
position: relative;
overflow: hidden;
margin: 0;
padding-top: 0;
}
.pic1 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.intro-img {
display: block;
margin: 0 auto;
min-width: 100%;
opacity: 0.4;
}
/* .intro-img:hover */
.intro:hover img.intro-img {
opacity: 1;
}
.wrapper {
height: 200px;
min-height: 200px;
position: relative;
padding-bottom: 0;
}
.blue {
background: #22428e;
color: #fff;
}
.red{
background: #de0e00;
color: #fff;
}
.color3 {
background: #f7c800;
color: #fff;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 330px;
padding: 0 25px;
margin-left: 3em;
}
h1 {
text-transform: uppercase;
font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
margin: 0 0 34px;
padding-top: 17px;
}
p {
margin-top: -10px;
font-family: sans-serif;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: black;
}
@media screen and (max-width: 454px) {
.wrapper {
min-height: 100px;
position: relative;
}
#colors-content {
height: 200px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 0 25px;
margin-left: -4px;
}
.pic1 {
display: none;
}
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Gender Identity 3</title>
<link rel="stylesheet" href="css/style-resources.css">
</head>
<body>
<div class="container">
<header>
<a href="index.html"> <img class="banner" src="images/banner-light2.png"> </a>
</header>
<div id="wrap">
<div id="tabwrap">
<ul id="tabs">
<li >
<a href="index-terms.html" class="cyan">Terms</a>
</li>
<li>
<a href="index-resources.html" class="green">Resources</a>
</li>
<li>
<a href="index-media.html" class="lav">Culture</a>
</li>
<li>
<a href="index-share.html" class="teal">Share</a>
</li>
</ul>
<div id="content">
<div id="terms" class="animated"> <p>Bacon ipsum dolor amet ribeye short loin leberkas andouille jerky meatloaf pork spare ribs corned beef. Andouille ham hock ground round, shankle pastrami rump hamburger filet mignon. </p></div>
<div id="resources" class="animated"><p>Access information providing links and other sources for those looking to reach out to others or simply learn more about gender Identitiy and orientation. </p></div>
<div id="culture" class="animated"><p>Tuna, sculpin squeaker rice eel, lamprey triggerfish mooneye African glass catfish, loach wolf-eel yellowhead jawfish grass carp sea dragon neon tetra. Fingerfish forehead brooder sarcastic fringehead sixgill ray, scaly dragonfish bluntnose minnow.</p></div>
<div id="share" class="animated"> <p>Sausage ground round sirloin ham hock t-bone tongue strip steak meatloaf landjaeger shankle andouille. Turducken doner brisket, shank salami shoulder kevin filet mignon ball tip chicken.</p>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
</div><!-- End of Div-->
<!-- Testing Share Content -->
<div class="container2">
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="blue" id="colors-content">
<div>
<a href=""> <h1> Gender
Spectrum.com </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s28.postimg.org/ku57tve0t/trevor.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="red" id="colors-content">
<div>
<a href=""> <h1> Trevor Project </h1> </a>
<p> I'm gone so i'me gone so long hah haha aha im bout it fuck it aiash hth as jasd ashd as ahsdjas r ajsgda uaju ashd ujawh uu ajshdhuiae</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div> <!-- End intro -->
<div class="intro">
<div class="pic1">
<img class="intro-img" src="https://s23.postimg.org/enh4axo8r/image.png">
</div> <!-- End pic1 -->
<div class="wrapper">
<article class="color3" id="colors-content">
<div>
<a href=""> <h1> AAUP.COM </h1> </a>
<p> Understanding the rights and laws protecting individuals in the lgbt+ community</p>
</div>
</article><!-- End of article -->
</div><!-- End wrapper -->
</div> <!-- End intro -->
</div>
<!-- Testing Share Content -->
<!-- Footer -->
<footer class="info">
<a href="index.html"> Home</a> |
<a href="index-terms.html"> Terms </a> | <a href="index-media.html">Media</a> | <a href="index-share.html" > Share</a>
<p class="last-home"> | 2016 | Web Design</p>
</footer>
</div> <!-- End of Div-->
</div> <!-- End of Div-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="js/index-terms.js"></script>
</body>
</html>