Парни, как наложить 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;
}