Как сделать наведение на два div одновременно?

ProgramBox

Как сделать наведение на два div одновременно?

Post author:admin
Запись опубликована:5 августа, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Мне нужно создать эффект наведения, подобный этому. Так что при наведении курсора на один блок он заполняет два блока внутри одного.

Они расположены в разных div, я попытался добавить наведение на класс боковой панели, он заполняет весь div.
Это мой код:

 .sidebar {
    width: 245px;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition-duration: 0.2s;
    overflow-y: auto;
    overflow-x: hidden;
}
.side-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 176px;
    height: 392px;
    top: 178px;
    left: 24px;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.sidebar-link:hover,  .sidebar-link.is-active {
    color: #fff;
    font-weight: 600;
    background-color: #6c5ecf;
    border-radius: 12px;
    width: 216px;
    height: 56px;
  }
  .sidebar.collapse {
    width: 90px;
    border-right: 1px solid var(--border-color);
  }
  .side-menu {
    display: flex;
    flex-direction: column;
    width: 176px;
    height: 392px;
  }
  .sidebar-link{
    display: flex;
    width: 176px;
    height: 56px;
  } 
  .side-menu a {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color:#000 ;/* var(--body-color); */
    
  }
  .side-menu a   a {
    margin-top: 5px;
  }
  .side-menu svg {
    width: 30px;
    padding: 8px;
    border-radius: 10px;
    background-color: var(--button-bg);
    flex-shrink: 0;
    margin-right: 16px;
  }
  .side-menu svg:hover {
    color: #fff;
    background-color: #32a7e2;
    
  }

 <div class="sidebar">
            <div class="side-wrapper">
                <div class="side-menu ">
                <a class="sidebar-link discover is-active" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" />
                    </svg>
                    Home
                </a>
                <a class="sidebar-link trending" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
                    </svg>
                    My Courses
                </a>
                </div>   
            </div>
        </div>

Развернуть фрагмент

stackoverflow спрашивает меня: «Похоже, ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей». Я не знаю, какие детали добавить
Я надеюсь, что кто-нибудь сможет помочь

1. Я не могу понять, в чем именно проблема, но использование .sidebar-link:hover как svg, так и ссылки дает правильный цвет фона?

2. Что это значит?: «Чтобы при наведении курсора на один блок он заполнял два блока внутри одного».

3. замена .side-menu svg:hover на .side-menu:hover > * выделит оба блока при наведении курсора меню (хотя неясно, что это желаемое).

4. Поместите два divs в контейнер / оболочку div, а затем поместите стили наведения на этот контейнер div.

Ответ №1:

Еще раз перечитываю ваш вопрос, и я думаю, вам не нужен «дополнительный ящик». Вы можете использовать значения padding и border-radius, чтобы получить желаемый эффект.

Смотрите демонстрацию ниже.

 .side-wrapper {
    display: flex;
    flex-direction: column;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.sidebar-link:hover,  .sidebar-link.is-active {
    color: #fff;
    font-weight: 600;
    background-color: #2f3ced;
    border-radius: 0 12px 12px 0;
    width: 216px;
    height: 56px;
  }

  .side-menu {
    display: flex;
    flex-direction: column;
    height: 400px; /* for demo */
    border-left: 10px solid #3f8cff;
  }
  .sidebar-link{
    display: flex;
    width: 176px;
    height: 56px;
  } 
  .side-menu a {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    
  }
  .side-menu a   a {
    margin-top: 5px;
  }
  .side-menu svg {
    width: 30px;
    padding: 8px;
    border-radius: 10px;
    background-color: var(--button-bg);
    flex-shrink: 0;
    margin-right: 16px;
  }
  .side-menu svg:hover {
    color: #fff;
    background-color: #2f3ced;
    
  }

 <div class="sidebar">
            <div class="side-wrapper">
                <div class="side-menu ">
                <a class="sidebar-link discover is-active" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" />
                    </svg>
                    Home
                </a>
                <a class="sidebar-link trending" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
                    </svg>
                    My Courses
                </a>
                                <a class="sidebar-link trending" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
                    </svg>
                    My Courses
                </a>
                                <a class="sidebar-link trending" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
                    </svg>
                    My Courses
                </a>
                                <a class="sidebar-link trending" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
                    </svg>
                    My Courses
                </a>
                </div>   
            </div>
        </div>

Развернуть фрагмент

Ответ №2:

Вам нужно изменить селектор наведения на один уровень выше: .sidebar-link:hover а затем изменить состояния его дочерних элементов (svg и текст). (Я предположил, что вы хотите то же самое для выбранного элемента, поэтому я использовал .sidebar-link:hover svg, .sidebar-link.is-active svg для выбора svg)

Смотрите здесь:

 .sidebar {
    width: 245px;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition-duration: 0.2s;
    overflow-y: auto;
    overflow-x: hidden;
}
.side-wrapper {
    display: flex;
    flex-direction: column;
    width: 176px;
    height: 392px;
    top: 178px;
    left: 24px;
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.sidebar-link:hover,  .sidebar-link.is-active {
    color: #fff;
    font-weight: 600;
    background-color: #6c5ecf;
    border-radius: 12px;
    width: 216px;
    height: 56px;
  }
  .sidebar.collapse {
    width: 90px;
    border-right: 1px solid var(--border-color);
  }
  .side-menu {
    display: flex;
    flex-direction: column;
    width: 176px;
    height: 392px;
  }
  .sidebar-link{
    display: flex;
    width: 176px;
    height: 56px;
  } 
  .side-menu a {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color:#000 ;/* var(--body-color); */
    
  }
  .side-menu a   a {
    margin-top: 5px;
  }
  .side-menu svg {
    width: 30px;
    padding: 8px;
    border-radius: 10px;
    background-color: var(--button-bg);
    flex-shrink: 0;
    margin-right: 16px;
  }
  .sidebar-link:hover svg, .sidebar-link.is-active svg {
    color: #fff;
    background-color: #32a7e2;
    
  }

 <div class="sidebar">
            <div class="side-wrapper">
                <div class="side-menu ">
                <a class="sidebar-link discover is-active" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M9.135 20.773v-3.057c0-.78.637-1.414 1.423-1.414h2.875c.377 0 .74.15 1.006.414.267.265.417.625.417 1v3.057c-.002.325.126.637.356.867.23.23.544.36.87.36h1.962a3.46 3.46 0 002.443-1 3.41 3.41 0 001.013-2.422V9.867c0-.735-.328-1.431-.895-1.902l-6.671-5.29a3.097 3.097 0 00-3.949.072L3.467 7.965A2.474 2.474 0 002.5 9.867v8.702C2.5 20.464 4.047 22 5.956 22h1.916c.68 0 1.231-.544 1.236-1.218l.027-.009z" />
                    </svg>
                    Home
                </a>
                <a class="sidebar-link trending" href="#">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.835 12.007l.002.354c.012 1.404.096 2.657.242 3.451 0 .015.16.802.261 1.064.16.38.447.701.809.905a2 2 0 00.91.219c.249-.012.66-.137.954-.242l.244-.094c1.617-.642 4.707-2.74 5.891-4.024l.087-.09.39-.42c.245-.322.375-.715.375-1.138 0-.379-.116-.758-.347-1.064-.07-.099-.18-.226-.28-.334l-.379-.397c-1.305-1.321-4.129-3.175-5.593-3.79 0-.013-.91-.393-1.343-.407h-.057c-.665 0-1.286.379-1.603.991-.087.168-.17.496-.233.784l-.114.544c-.13.874-.216 2.216-.216 3.688zm-6.332-1.525C3.673 10.482 3 11.162 3 12a1.51 1.51 0 001.503 1.518l3.7-.328c.65 0 1.179-.532 1.179-1.19 0-.658-.528-1.191-1.18-1.191l-3.699-.327z" />
                    </svg>
                    My Courses
                </a>
                </div>   
            </div>
        </div>

Развернуть фрагмент

Метки: Как сделать наведение на два div одновременно?

Вопрос:

Комментарии:

Ответ №1:

Ответ №2:

Вам также может понравиться

Получение всех свойств класса typescript, даже если они неявно не определены

Пользовательское ограничение валидатора гибернации не работает

сохранение букв из текстового файла в массив