html - CSS Hover 定位其他元素

Question

当悬停在 .calltoaction 上时，背景图像应该缩放到 105%。如何通过 CSS 定位？我正在为我的 html 使用 foundation.css。还创建了代码笔:http://codepen.io/rezasan/pen/dpyoYO

HTML:

<div id="tiles">
<div class="row">
<div class="medium-6 columns nopadleftright tile-img" style="background-image:url('http://placehold.it/300x300');"></div>
<div class="medium-6 columns nopadleftright text-center">
  <div class="v-align">
    <h1 class="preheader text-center">EXPERIENCES</h1>
    <h1>A Magical Location</h1>
    <p>Text</p>
    <div class="calltoaction"><a href="#">ABOUT</a></div>
  </div>
</div>
 <div class="row">
   <div class="medium-6 columns nopadleftright text-center">
  <div class="v-align">
    <h1 class="preheader text-center">EXPERIENCES</h1>
    <h1>A Magical Location</h1>
    <p>Text</p>
    <div class="calltoaction"><a href="#">ABOUT</a></div>
  </div>
</div>
<div class="medium-6 columns nopadleftright tile-img" style="background-image:url('http://placehold.it/300x300');"></div>

CSS:

#tiles .row .medium-6 {
    width:45%;
    float:left;
    height: 185px;
    background-color: #fff;
    padding:0 10px;
}

#tiles .row .tile-img{
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    transition: background-size .3s ease-in-out;
    -moz-transition: background-size .3s ease-in-out;
    -ms-transition: background-size .3s ease-in-out;
    -o-transition: background-size .3s ease-in-out;
    -webkit-transition: background-size .3s ease-in-out;
}

#tiles .calltoaction a:hover + .tile-img {
    background-size: 105%;
}

Answer 1

你不能通过纯 CSS 做到这一点，因为它不能那样工作(在你的情况下你不能定位一个 parent )。但是，您可以通过一些 jQuery 函数来实现:

$('.calltoaction a').hover(function(){
  $('.tile-img').css('background-size', '105%');
});

https://jsfiddle.net/wx38rz5L/2777/