#html #css
#HTML #css
Вопрос:
Я пытаюсь создать ползунок, который изменяет div в направлении стрелок. Стрелки не должны быть доступны, если вы не наведете курсор мыши на родительский элемент. Но стрелки доступны только при наведении курсора мыши на внешнюю правую часть изображения в родительском div. Также не работает наведение курсора на ссылку субтитров. Любая помощь была бы очень признательна.
/*Background*/
.collection {
height: 400px;
position: relative;
background-image: url('http://www.cliometrics.com/bbw/images/slider/bg/2.png');
background-repeat: no-repeat;
background-size: 120%;
position: relative;
z-index: -1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*Title*/
.collection p span {
display: block;
font-size: 50px;
font-weight: 600;
position: relative;
top: 50px;
left: 30px;
}
.collection p span:last-of-type {
color: rgb(255, 0, 0);
position: relative;
bottom: 15px;
}
/*Subtitle*/
.collection a {
display: block;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
transition: color 250ms;
position: relative;
top: 60px;
left: 30px;
}
.collection a:hover {color: rgb(255, 0, 0);}
/*Arrows for shifting*/
#collection_shifter {
position: absolute;
top: 100px;
width: 100%;
font-size: 70px;
color: rgb(10, 10, 10);
}
/*Left Arrow*/
#collection_shifter i:first-of-type {
position: absolute;
left: 50px;
z-index: 1;
display: none;
}
.collection:hover #collection_shifter i:first-of-type {
display: inline-block;
left: 50px;
}
/*Right Arrow*/
#collection_shifter i:last-of-type {
position: absolute;
right: 30px;
z-index: 1;
display: none;
}
.collection:hover #collection_shifter i:last-of-type {
display: inline-block;
right: 30px;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="collection">
<div id="collection_shifter">
<i class="far fa-chevron-left"></i>
<i class="far fa-chevron-right"></i>
</div>
<p><span>New Books</span><span>Collection</span></p>
<a href="#">Shop Now -</a>
</div>
Ответ №1:
Похоже, ваша основная проблема — это z-индекс в вашей коллекции. Установка значения -1 отодвигает элемент за все остальное, что мешает тому, на что вы можете навести курсор.
Удаление z-индекса, похоже, заставляет все работать так, как вы хотите. Это то, что вам нужно?
/*Background*/
.collection {
height: 400px;
position: relative;
background-image: url('http://www.cliometrics.com/bbw/images/slider/bg/2.png');
background-repeat: no-repeat;
background-size: 120%;
position: relative;
/* z-index: -1; */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*Title*/
.collection p span {
display: block;
font-size: 50px;
font-weight: 600;
position: relative;
top: 50px;
left: 30px;
}
.collection p span:last-of-type {
color: rgb(255, 0, 0);
position: relative;
bottom: 15px;
}
/*Subtitle*/
.collection a {
display: block;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
transition: color 250ms;
position: relative;
top: 60px;
left: 30px;
}
.collection a:hover {
color: rgb(255, 0, 0);
}
/*Arrows for shifting*/
#collection_shifter {
position: absolute;
top: 100px;
width: 100%;
font-size: 70px;
color: rgb(10, 10, 10);
}
/*Left Arrow*/
#collection_shifter i:first-of-type {
position: absolute;
left: 50px;
z-index: 1;
display: none;
cursor: pointer; /* optional: change the cursor when you hover over the arrow */
}
.collection:hover #collection_shifter i:first-of-type {
display: inline-block;
left: 50px;
}
/*Right Arrow*/
#collection_shifter i:last-of-type {
position: absolute;
right: 30px;
z-index: 1;
display: none;
cursor: pointer; /* optional: change the cursor when you hover over the arrow */
}
.collection:hover #collection_shifter i:last-of-type {
display: inline-block;
right: 30px;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="collection">
<div id="collection_shifter">
<i class="far fa-chevron-left"></i>
<i class="far fa-chevron-right"></i>
</div>
<p><span>New Books</span><span>Collection</span></p>
<a href="#">Shop Now -</a>
</div>