html - CSS 悬停菜单项

Question

我的网站底部有一个固定的导航。我遇到的问题是悬停效果(背景)在我将鼠标悬停在文本上之前就向上滑动了。目前，当我的鼠标进入 .item-container 时，背景会向上滑动。基本上我需要让悬停效果只在我的鼠标悬停在文本上而不是外部 div 上时发生。

我有一个 jsFiddle:https://jsfiddle.net/tebrown/dLz8fL80/

<nav>
    <ul>
        <li>
            <a href="#">
                <div class="item-container">
                    <div class="item-top">The Song</div>
                    <div class="item-bottom-song-content">The Song</div>
                    <div class="item-bottom-song">Have a Listen</div>
                </div>
            </a>
        </li>
        <li>
        ...
    </ul>
</nav>

任何帮助将不胜感激。

干杯

Answer 1

在你的 CSS 中改变这个:

.item-container {
    top: 150px;
    position: relative;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.item-container:hover {
    height: 225px;
    line-height: 300px;
    top: -210px;
}

您的问题是您已将容器的初始高度设置为 225px 并且每当您悬停该区域时它会弹出元素内容，即当悬停在底部元素文本上方时内容会弹出。

您需要更改的是.item-container 的高度。当它们未悬停时，您必须将其设置为 30px，当您悬停其中一些时，您希望它显示其原始高度 225px 的内容。

这是一个fiddle