Есть простой слайдер, состоящий из 3-х блоков (сделан на css, без js). У всех трех блоков есть ссылка, оформленная в виде кнопки. Почему-то при наведении мышки на эту ссылку стили срабатывают только у последнего блока, а у первых двух - не срабатывают. Причем, если удалить последний блок и оставить только два, - то стили : hover сработают опять же у последнего (теперь второго) блока, а у первого - нет. Если оставить только один блок, а два удалить. - то у оставшегося блока стили : hover сработают. На другой странице есть подобная ссылка, - у нее стили : hover работают.
Вот страница:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="build/css/style.min.css">
<title>Fresh_ideas home</title>
</head>
<body class="page">
<!-- +++++++++++++++ HEADER ++++++++++++++++ -->
<header class="page-header header">
<a href="#" class="header__logo logo">
<img src="source/img/logo.png" alt="Логотип компании">
</a>
<nav class="header__nav nav">
<ul class="nav-items">
<li class="nav-item nav-item--active">
<a href="#" class="link link--navigation">Home</a>
</li>
<li class="nav-item">
<a href="about.html" class="link link--navigation">About Us</a>
</li>
<li class="nav-item">
<a href="services.html" class="link link--navigation">Services</a>
</li>
<li class="nav-item">
<a href="" class="link link--navigation">Portfolio</a>
</li>
<li class="nav-item">
<a href="news.html" class="link link--navigation">News</a>
</li>
<li class="nav-item">
<a href="contacts.html" class="link link--navigation">Contacts</a>
</li>
</ul>
</nav>
</header>
<!-- +++++++++++++++ slider ++++++++++++++++ -->
<section class="page__slider slider">
<div class="slider__item item1">
<div class="slider-text">
<h1 class="slider-text__header">We Serve Fresh Ideas</h1>
<p class="slider-text__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos cum neque laudantium! Phasellus sollicitudin.</p>
<a href="#" class="slider-text__button button">Read more about our fresh ideas</a>
</div>
<div class="slider-image">
<img src="source/img/banner1.jpg" alt="Изображение слайдера">
</div>
</div>
<div class="slider__item item2">
<div class="slider-text">
<h1 class="slider-text__header">we have a great team</h1>
<p class="slider-text__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi deserunt delectus sed, veniam dolorum necessitatibus.</p>
<a href="#" class="slider-text__button button">Read more about our fresh ideas</a>
</div>
<div class="slider-image">
<img src="source/img/banner2.jpg" alt="Изображение слайдера">
</div>
</div>
<div class="slider__item item3">
<div class="slider-text">
<h1 class="slider-text__header">it's convenient with us</h1>
<p class="slider-text__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, porro, Eligendi deserunt delectus sit amet consectetur adipisicing. </p>
<a href="#" class="slider-text__button button">Read more about our fresh ideas</a>
</div>
<div class="slider-image">
<img src="source/img/banner3.jpg" alt="Изображение слайдера">
</div>
</div>
</section>
Вот стили:
.slider-text__button {
margin: 8px 0;
}
.button {
display: inline-block;
padding: 0.5em 2em 0.55em;
font-size: 16px;
line-height: 1;
color: #d7d7d7;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
border: 1px solid @color-dark;
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
border-radius: 0.5em;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
cursor: pointer;
}
.button:hover {
background: @color-black;
}
Вот ссылка на github:
https://github.com/youngImposer/Fresh_ideas 
