Question

当悬停在.calltoaction上时，背景图像应该缩放到105％。我如何通过CSS定位？我正在使用foundation.css作为我的HTML。还创建了一个codepen：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执行此操作，因为它不会以这种方式工作（您可以在您的案例中定位父）。但是你可以通过一个小jQuery函数来实现这个目的：

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

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

Answer 2

使用背景大小：悬停时为105％

    #tiles .row .tile-img:hover {
     background-size:105%;
    }

CSS Hover目标其他元素

2 个答案: