html - 为什么我的图像在悬停时不透明度没有变化？

标签 html css hover opacity

<分区>

我在将图像从 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>

关于html - 为什么我的图像在悬停时不透明度没有变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41201824/

上一篇：html - 如何使用显示: table to get the same row heights in firefox as in chrome and edge

下一篇：css - 悬停时的目标文本颜色

相关文章：

css - 选择器无法从 Chrome 正确转换为 Firefox 和 Safari

Javascript 悬停图像替换

html - MAC 上的 Safari 跳过输入字段

html - 导出 Confluence 空间时缩放标题页图像以适合整个页面

html - Css 第 n 个 child :hover ~ first-child {. ..}

jquery - 为什么我的html文本不动？

jquery - CSS从右向左扩展宽度

javascript - Div 悬停指针

asp.net - 将鼠标悬停在图像上时需要 CSS 效果，以便在其上方显示另一个图像和/或文本

javascript - 自定义 404 页面导致子文件无法加载 javascript

©2024 IT工具网  联系我们