Hover наведения на блок

267

10 декабря 2016, 10:36

Html

<div class="post">
                        <div class="post_ic1">
                            <div class="ps_data">
                                <h5 class="dat_tx">30</h5>
                                <h5 class="dat_tx">.Sep</h5>
                            </div>
                        </div>
                            <h2 class="post_h2 post_h2_active">Lorem ipsum dolor sit amet</h2>
                               <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</p>
                        <a href="#">Read More
                        <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                        </a>
                    </div>

Надо сделать так, чтобы при наведении на блок post менялись цвет "h2 class="post_h2", p, также фон и цвет блоков class=dat_tx

должно быть так

Answer 1

Просто опишите все требуемые стили в блоках типа такого:

post:hover .post_h2{
    color: red;
}

Так как вы не сказали конкретно, какие стили нужны, то я не могу предоставить готовый код.

Answer 2

Вот так это делается : смотрите сниппет

*{ 
  margin:0; 
  padding:0; 
} 
a{ 
  text-decoration:none; 
  color:#909090; 
  padding:0 6px; 
} 
a:hover{ 
  color:#000; 
  text-decoration:underline; 
} 
.card{ 
  width:300px; 
  min-height:100px; 
  margin:30px 10px; 
  padding:0; 
  background:#eee; 
  color:#909090; 
  font-size:20px; 
  transition:background .5s; 
} 
.card:hover{ 
  background:#b7e8ef; 
  color:#111; 
} 
.card:hover img{ 
   filter: grayscale(0%); 
  -webkit-filter:grayscale(0%);  
} 
.card:hover a{ 
  color:#fff; 
  animation:link 1s infinite; 
} 
@-webkit-keyframes link{ 
  from{ 
    background:red; 
  } 
} 
img{ 
  display:block; 
  width:100%; 
  height:auto; 
  filter: grayscale(100%); 
  -webkit-filter:grayscale(100%); 
  transition:all .5s; 
} 
img:hover{ 
  filter: grayscale(0%); 
  -webkit-filter:grayscale(0%);   
} 
.images{ 
  width:100%; 
  height:150px; 
  position:relative; 
  overflow:hidden; 
} 
.imgPosition{ 
  position:absolute; 
  top:-250px; 
} 
.text{ 
  text-align:justify; 
  width:98%; 
  margin:auto; 
}

<div class="card">  
 <div class="images">  
  <div class="imgPosition"> 
  <img src="http://avakartinki.ru/wp-content/uploads/2012/04/avatarka_nout08.jpg" alt="девушка с ноутбуком"> 
  </div> 
 </div> 
 <div class="text"> 
 <p> 
That is preciously how this string was constructed. Default text is for web developers and designers that need default text quickly. 
</p> 
 </div> 
 <div class="link"> 
   <a href="">читать далее</a> 
</div> 
</div>