主页 / 问题 / 1538648
Accepted
TopTTeDHbIu-DeJLbFuH4uk
Asked:2023-09-01 20:20:22 +0000 UTC2023-09-01 20:20:22 +0000 UTC

如何为滑动菜单制作悬停效果

  • 772

各位，如何将悬停应用到滑动导航菜单？我有一个图标，在屏幕后面，使用变换，隐藏了带有文本的菜单的一部分，当您将鼠标悬停在该区域上时，我需要显示就像下图一样背景颜色（参见屏幕截图）：#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;
}
javascript

1 个回答

  1. Best Answer

    那么我建议这个选项

    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>

    • 0

相关问题