1

Парни, как наложить hover на выдвижное меню навигации? У меня есть иконка, а за экраном, с помощью transform спрятана часть меню с текстом, мне надо, чтобы при наведении мышкой на эту область (см скрин)как на изображении ниже появлялся background-color: #2a2a2e; Но, из-за того, что контейнер с иконкой и текст разделены в структуре html, то у меня получается наложить эффект только на контейнер с иконкой, область с текстом не захватывается, я пробовал добавлять ей контейнер с фиксированной шириной и высотой, задавать стили с помощью JS путём назначения контейнеру обработчика событий и т.д., но всё это безуспешно. В общем, hover эффект должен быть такой как на сайте codeWars, спасибо огромное!!!

HTML:

<div class="main-container">
    <div class="icon-logo-unrated">
        <img src="test/Unrated.svg" alt="img-icon-logo">
    </div>
    <div class="drop-right-menu">
        <div class="home-page-label">Home
            <div class="home-page-text">Go home to choose a different difficulty</div>
        </div>
    </div>
</div>

CSS:

/* main container */
.main-container {
    position: absolute;

    background-color: #121216;
    width: 50px;
    height: 100vh;
    /*border-right: 1px solid #2a2a2e;*/
}

.icon-logo-unrated {
    position: absolute;

    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 60px;
}

.drop-right-menu {
    position: relative;

    width: 320px;
    height: 100vh;
    background-color: #121216;
    border-right: 1px solid #2a2a2e;

    z-index: -1;

    transition: transform 0.3s ease;
    transform: translateX(-320px);
}

.main-container:hover .drop-right-menu {
    transition: transform 0.3s ease;
    transform: translateX(0);
}

/* TEXT */
.home-page-label {
    font-size: 20px;
    line-height: 1.5rem;
    font-weight: 700;
    color: #c1c1c1;

    padding-left: 55px;
    padding-top: 8px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.home-page-text {
    padding-bottom: 0.25rem;
    font-size: 15px;
    line-height: 1rem;
    white-space: nowrap;
    color: #c1c1c1;

    padding-top: 3px;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.icon-logo-unrated:hover {
    background-color: #2a2a2e;
}

1 ответ 1

0

предлагаю такой вариант тогда

p,
h3,
body {
  margin: 0;
}

.nav {
  display: flex;
  flex-direction: column;
  width: 61px;
  background-color: black;
  overflow: hidden;
  height: 100vh;
  transition: width 0.1s linear;
}

.nav__item {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
  color: white;
  height: 60px;
  cursor: pointer;
  text-decoration: none;
}

.nav__item > img {
  width: 35px;
  height: 35px;
  margin: auto 13px;
}

.nav:hover {
  width: 200px;
}

.nav__item p {
  opacity: 0;
  
}

.nav:hover p {
    transition: opacity 0.1s linear 0.1s;
  opacity: 1;
}

.nav__item:hover {
    background-color: grey;
}
<div class="nav">
        <a href="#" class="nav__item">
            <img src="./photo_2023-08-27_08-42-09.jpg" alt="">
            <div>
                <h3>Главная</h3>
                <p>Длинное описание чего-то там</p>
            </div>
        </a>
        <a href="#" class="nav__item">
            <img src="./photo_2023-08-27_08-42-09.jpg" alt="">
            <div>
                <h3>Главная</h3>
                <p>Длинное описание чего-то там</p>
            </div>
        </a>
        <a href="#" class="nav__item">
            <img src="./photo_2023-08-27_08-42-09.jpg" alt="">
            <div>
                <h3>Главная</h3>
                <p>Длинное описание чего-то там</p>
            </div>
        </a>
    </div>

3
  • Привет. К сожалению нет, пример есть вот тут: codewars.com/trainer/setup Но спасибо за ответ! 1 сен в 15:22
  • @TopTTeDHbIu-DeJLbFuH4uk чекни новый вариант 1 сен в 16:08
  • Спасибо, но я уже смог справиться с этой задачей. Я так же попробовал твой вариант, он близок к решению, но всё же это не то, картинки перекрыты текстом, а картинка должна быть видна, ну и соответственно при наведении курсором мыши на боковое меню открывается часть с текстом. Ещё раз спасибо! Я отметил этот вариант как полезный. 2 сен в 6:33

Ваш ответ

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

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