0

У меня есть 3 ссылки при наведении на которые, я хочу чтобы на заднем фоне появлялся определенный текст. То есть когда навожу курсор мыши на "Works" на фоне появляется "Works", когда навожу на "About" на фоне появляется "About". Не понимаю, как это сделать, если добавляю второй текст они лезут друг на друга.

Ниже прикрепляю свой код (Нужно открыть на всю страницу, чтобы увидеть результат).

Буду благодарен, если поможете.

.info {
  max-width: 1920px;
  padding: 40px 0 0;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background-color: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

 .info__text{
  width: 60px; 
  z-index: 1;
} 

.info__black-hover {
  background: #1c1c1c;
  width: 1920px;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  transition: 0.5s opacity, 0.5s visibility, 0.6s height ease-in;
}

.info__text:hover~.info__black-hover{
  width: 100%;
  height: 150px;
  opacity: 1;
  visibility: visible;
  background: #1c1c1c;
} 

.info__text_hidden {
  font-size: 210px;
  font-family: "Roobert";
  letter-spacing: -10px;
  position: absolute;
  color: #474747; 
  bottom: -38px;
  left: 870px;
  z-index: 1;
  transform: translateY(70%);
  transition: all 1.3s ease;
}

 .info__text:hover~.info__text_hidden {
    visibility: visible;
    color: #636262;
    transform: translateY(0%);
}  


.info__text_decoration {
  font-family: "RoxboughCF-Regular";
  position: absolute;
  left: -185px;
  bottom: 2px;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c; 
}

.info__link:hover {
  color: white;
}
<section class="info">
      <ul class="info__container">
        <li  class="info__text"><span class="info__number">01</span><a class="info__link" href="#"> Works</a></li>
        <div class="info__text_hidden"><span class="info__text_decoration">W</span>orks</div> 
        <li class="info__text"><span class="info__number">02</span><a class="info__link"  href="#"> About</a></li>
        <div class="info__text_hidden"><span class="info__text_decoration">A</span>bout</div> 
        <li class="info__text"><span class="info__number">03</span><a class="info__link"  href="#"> Contact</a></li>
        <div class="info__black-hover"></div>
      </ul>
</section>

1 ответ 1

1

не пиксель пёрфект конечно, но работает.

section{
display: flex;
position: relative;
--f: 'Works';
--s: 'About';
--t: 'Contact';
z-index: 2;
/* overflow: hidden; */
padding-left: 2em;
}
section:after{
content: ' ';
background: darkgray;
position:absolute;
height: 0;
width: 100%; left: 0; bottom: 2.5em;
transition: all .5s ease .2s;
}
section:hover:after{
height: 100%;
background: #333;
bottom: 0;
}

section > a{
z-index: 3;
display: list-item;
margin: 2em;
list-style: decimal-leading-zero;
}
section > a:nth-child(1):before{content: var(--f);}
section > a:nth-child(2):before{content: var(--s);}
section > a:nth-child(3):before{content: var(--t);}

#x{
position: absolute;
font-size: 70px;
color: gray;
right: 1em;
top: 2em;
transition: top .5s ease .2s;
z-index: 1;
}
a:hover ~ #x{top: 0;}
a:nth-child(1):hover ~ #x:before{content: var(--f);}
a:nth-child(2):hover ~ #x:before{content: var(--s);}
a:nth-child(3):hover ~ #x:before{content: var(--t);}
<section>
<a href='#1'></a>
<a href='#2'></a>
<a href='#3'></a>
<span id='x'></span>
</section>

1
  • Спасибо вам за помощь
    – OFFSNAKE
    Commented 23 окт. 2022 в 18:07

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.