На CSS наведите курсор на кнопку, я могу изменить стиль дочернего элемента div.

Question

Когда я нажимаю кнопку, я могу изменить другой дочерний стиль divs.

Html

<a href="#"> 
    <div class="col-md-6 repair"> 
    <div class="imagehover"> 
     <img class="img-responsive" src="images/restorarion.jpg" /> 
    </div> 
    <button type="button" class="btn btn-firstblock">REPAIR</button> 
    </div> 
</a> 

Я попробовал это все ниже, но не работаю

.btn-firstblock:hover + .imagehover img{ 

-moz-transform: scale(1.08); 
-webkit-transform: scale(1.08); 
transform: scale(1.08); 
opacity: 0.7;} 

И

.btn-firstblock:hover ~ .imagehover img{ 

-moz-transform: scale(1.08); 
-webkit-transform: scale(1.08); 
transform: scale(1.08); 
opacity: 0.7;} 

Answer 1

Там нет предыдущего выбора родственного в CSS, + рядом селектор родственного и ~ снова рядом, но могут быть и другие элементы: твин. CSS подобен потоку воды, означает, что нет обратного действия. Вот почему нет предыдущего селектора.

Если вы положили кнопку до .imagehover div, она будет работать.

.btn-firstblock:hover + .imagehover img{ 
 

 
-moz-transform: scale(1.08); 
 
-webkit-transform: scale(1.08); 
 
transform: scale(1.08); 
 
opacity: 0.7;}

<a href="#"> 
 
    <div class="col-md-6 repair"> 
 
    <button type="button" class="btn btn-firstblock">REPAIR</button> 
 
    <div class="imagehover"> 
 
     <img class="img-responsive" src="http://www.skrenta.com/images/stackoverflow.jpg" /> 
 
    </div> 
 
    
 
    </div> 
 
</a>

JQuery Решение

Если вам нужна кнопка после .imagehover DIV, вы можете использовать JavaScript, как это:

$(document).ready(function(){ 
 
    $('.btn-firstblock').hover(function(){ 
 
    //mouseover 
 
    $(this).prev().find('img').addClass('transform'); 
 
    },function(){ 
 
    //mouseout 
 
    $(this).prev().find('img').removeClass('transform'); 
 
    }) 
 
})

img.transform{ 
 

 
-moz-transform: scale(1.08); 
 
-webkit-transform: scale(1.08); 
 
transform: scale(1.08); 
 
opacity: 0.7;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"> 
 
    <div class="col-md-6 repair"> 
 
    <div class="imagehover"> 
 
     <img class="img-responsive" src="http://www.skrenta.com/images/stackoverflow.jpg" /> 
 
    </div> 
 
    <button type="button" class="btn btn-firstblock">REPAIR</button> 
 
    </div> 
 
</a>