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之前，它将起作用。

＆＃13;

.btn-firstblock:hover + .imagehover img{

-moz-transform: scale(1.08);
-webkit-transform: scale(1.08);
transform: scale(1.08);
opacity: 0.7;}

＆＃13;

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

＆＃13;

JQuery解决方案

如果你需要.imagehover div之后的按钮，你可以使用这样的javascript：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在CSS上悬停按钮，我可以更改另一个div的儿童样式

1 个答案: