html मेरा आईएमजी हॉवर क्यों काम नहीं करता है?




css image (7)

सीएसएस में '# pic1' 'pic1' के 'id' मान के साथ एक html तत्व चुनें, लेकिन 'pic1' आपके पहले html पृष्ठ में 'वर्ग' मान है ...

मैं एक opacity: .04; सेट होने की कोशिश कर रहा हूं opacity: .04; , और जब opacity:1; होना चाहिए opacity:1; हालांकि, मेरा आईएमजी होवर काम नहीं कर रहा है मैं इस बात का अनिश्चित हूँ कि यह क्यों है। क्या कोई मुझे समझ सकता है कि मेरी समस्या कहां है?

मेरा एचटीएमएल:

.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;
}
.pic1 img:hover {
  opacity: 1;
}
.wrapper {
  height: 200px;
  min-height: 200px;
  position: relative;
  padding-bottom: 0;
}
.blue {
  background: #22428e;
  color: #fff;
}
.green {
  background: #de0e00;
  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: 28px;
}
p {
  margin-top: -10px;
}
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;
  }
}
<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>
<! -- End of container2 -->


आपके कोड में दो संभावनाएं हैं, यदि आप पृष्ठभूमि की अपारदर्शिता 1 को केवल उस पृष्ठभूमि पर माउस को हॉवर करते हुए बनाते हैं, तो यह आपका कोड है:

.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;
}
#pic1 img:hover{
  opacity: 1;
}
.wrapper {
  height: 200px;
    min-height: 200px;
    position: relative;
  padding-bottom: 0;
    margin-left: 3em;
    width: 330px;
}
.blue {
   background: #22428e;
    color: #fff;
}
.green{
     background: #de0e00;
    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;
}
h1 {
      text-transform: uppercase;
    font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
    margin: 0 0 34px;
  padding-top: 28px;
}
p {
  margin-top: -10px;
}
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;
}
}
<div class="container2">
<div class="intro">
  <div id="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> <! -- End of container2 -->

अगर आप अपने माउस को मोहरे नीले रंग के आवरण पर हॉवर करते हैं और पृष्ठभूमि पर माउस को हॉवर करते हैं, तो आप 1 के लिए पृष्ठभूमि की अस्पष्टता बनाना चाहते हैं, तो यहां कोड है:

.container2 {
  margin: 0px;
  padding: 0px;
}
.wrapper:hover + div#pic1 img.intro-img {
    opacity: 1;
}
.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;
}
#pic1 img:hover{
  opacity: 1;
}
.wrapper {
  height: 200px;
    min-height: 200px;
    position: relative;
  padding-bottom: 0;
    margin-left: 3em;
    width: 330px;
    z-index: 9;
}
.blue {
   background: #22428e;
    color: #fff;
}
.green{
     background: #de0e00;
    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;
}
h1 {
      text-transform: uppercase;
    font: 700 32px/35px 'Gotham SSm A','Gotham SSm B',Arial,Helvetica,sans-serif;
    margin: 0 0 34px;
  padding-top: 28px;
}
p {
  margin-top: -10px;
}
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;
}
}
<div class="container2">
<div class="intro">
<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 id="pic1">
     <img class="intro-img" src="https://s23.postimg.org/94clk2prf/resources_gender_spectrum2.png">
    </div> <!-- End pic1 -->

  </div> <!-- End intro -->
  </div> <! -- End of container2 -->


आपका pic1 एक क्लास नहीं है जो कि # pic1 उपयोग। Pic1 का आईडी आरा


मैंने स्थानांतरित किया: चयनकर्ता को

.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;
}
.g
<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>
<! -- End of container2 -->


आपका .wrapper तत्व आपकी छवि को कवर कर रहा है । यही कारण है कि माउस इवेंट इसके पीछे के तत्वों पर ट्रिगर नहीं करते हैं।

मैंने दिया था। .wrapper { margin-top: 200px; } .wrapper { margin-top: 200px; } तो आप देखते हैं कि जैसे ही यह ठीक हो जाता है, यह काम करता है।

.container2 {
  margin: 0;
  padding: 0;
}
.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;
}
.pic1 img:hover {
  opacity: 1;
}
.wrapper {
  height: 200px;
  min-height: 200px;
  position: relative;
  padding-bottom: 0;
  margin-top: 200px;
}
.blue {
  background: #22428e;
  color: #fff;
}
.green {
  background: #de0e00;
  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: 28px;
}
p {
  margin-top: -10px;
}
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;
  }
}
<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>
<! -- End of container2 -->


मैंने अपने कोड को "jsfiddle" में कॉपी और चिपकाया और होवर के लिए सीएसएस बदल दिया; यह अब माउसओवर पर ठोस हो जाता है

.intro-img:hover{
  opacity: 1;
}

अपने सीएसएस में अपना दृष्टिकोण समायोजित करें आप .intro-img वर्ग का उपयोग कर अस्पष्टता निर्धारित कर रहे हैं, इसलिए आपको एक ही कक्षा का उपयोग करना होगा।

img.intro-img:hover {
    opacity: 1;
}




opacity