Почему мой img hover не работает?

Я пытаюсь установить на opacity: .04;, и когда навешивается, чтобы быть opacity:1;, однако, мой img hover не работает. Я не знаю, почему это так. Может ли кто-нибудь помочь мне понять, где моя проблема?Почему мой img hover не работает?

мой HTML:

.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 -->

источник

2016-12-17 Lubidia13

Найти источник вашей проблемы в моем ответе ниже. Вы можете легко увидеть его самостоятельно, добавив '.wrapper {background-color: red; } '. – connexo

Вы проверили его? – connexo

Ваш .wrapper элемент обложка ваше изображение. Это означает, что события мыши не срабатывают по элементам, стоящим за ним.

Я дал .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 -->

источник

2016-12-17 17:57:04 connexo

Я переместил: селектор парения в .intro-img вместо

.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 -->

источник

2016-12-17 17:05:26

Это не работает для меня по какой-то нечетной причине – Lubidia13

Adj ust ваш подход в CSS. Вы устанавливаете непрозрачность с использованием класса .intro-img, поэтому вам нужно будет использовать тот же класс.

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

источник

2016-12-17 17:08:44

Это не работает для меня по какой-то причине – Lubidia13

Я скопировал и вставил ваш код в «jsfiddle» и изменил CSS для зависания; теперь он становится прочным при наведении курсора мыши.

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

источник

2016-12-17 17:09:00

Это не работает для меня, почему-то – Lubidia13

Это не сработало, потому что вы использовали # вместо. на селекторе CSS

<div class="pic1">

означает, что вы должны сделать

.pic1 img:hover{ opacity: 1; }

источник

2016-12-17 17:10:15

Я изменил класс на id, ошибочно поставив здесь старый код. Но он все еще не работает – Lubidia13

Ваш pic1 класс не ID INSEAD из # pic1 использования .pic1

источник

2016-12-17 17:11:21 Energy

Я сделал это id, но ошибочно поставил старый код для этого. Я изменил это здесь. – Lubidia13

'#' pic1 в CSS выберите элемент html с «id» значением «pic1», но «pic1» является значением «class» на вашей первой странице html ...

источник

2016-12-17 17:12:52

Есть два варианта в вашем коде, если вы хотите, чтобы сделать непрозрачность 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 -->

источник

2016-12-17 17:39:08 Harry

Почему мой img hover не работает?

ответ

Смежные вопросы