CSS Hover target другой элемент

При наведении на .calltoaction фоновое изображение должно масштабироваться до 105%. Как настроить таргетинг с помощью CSS? Я использую foundation.css для своего html. Codepen был создан, а также: http://codepen.io/rezasan/pen/dpyoYO CSS Hover target другой элемент

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%; 
}

источник

2016-09-01 Reza San

думает, вы, чтобы написать JS для этого – kukkuz

Yo u не может сделать это с помощью чистого CSS, потому что он не работает таким образом (вы не можете направить родительский в ваш случай). Однако вы могли бы добиться этого с помощью маленькой функции JQuery:

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

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

источник

2016-09-01 08:50:40

Это работает, но то, что я получил здесь множество строк с calltoactions и изображениями. Когда я нахожу конкретную «calltoaction», все изображения будут масштабироваться. Я хочу, чтобы только конкретное изображение этой строки изменилось. См. Обновленный код. Когда мышь уходит, изображение все еще перемасштабировано. Мне нужно, чтобы он вернулся на 100%. –

@RezaSan, проверьте https://jsfiddle.net/wx38rz5L/2777/, кстати, вы не закрыли свои ** строки ** 'divs в своем начальном коде –

Да, я пропустил этот div div. Теперь он работает с переходом. Ты мой замечательный ангел. Большое спасибо @Denea Novac –

Использование фона Размер: 105% по наведению

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

источник

2016-09-01 08:45:58

CSS Hover target другой элемент

ответ

Смежные вопросы