问图标+文本悬停
EN

Stack Overflow用户

提问于 2020-11-01 05:07:08

回答 1查看 46关注 0票数 2

.menu-items{
    list-style: none;
    margin-top: 16px;
}

.menu-items span{
    height: 31px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #242b39;
    margin-left: 22px;
}

.menu-items li{
    margin-top: 10px;
}

.menu-items li:hover{
    border-radius: 8px;
    background-color: #f1f4f8;
}

 <ul class="menu-items">
                <li><img src="./images/online.png"><span>Customer Overview</span></li>
                <li><img src="./images/list-dot.png"><span>Reports</span></li>
                <li><img src="./images/file-add.png"><span>File transcodings</span></li>
                <li><img src="./images/notification.png"><span>Notification center</span></li>
</ul>

你好,

我遇到了一个问题，我需要把图标和文本放在一起，当鼠标悬停时，我需要均匀地覆盖整个内容。

当我现在将鼠标悬停在图标的一侧时，它就会粘在图标上，但是我添加了填充，把整个事情搞得一团糟。

有没有什么更好的方法呢？

谢谢你的建议。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-01 05:13:18

我想你把填充添加到了错误的元素/类，因为我做了，它看起来像雨一样好。

.menu-items{
    list-style: none;
    margin-top: 16px;
}

.menu-items span{
    height: 31px;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.47;
    letter-spacing: normal;
    color: #242b39;
    margin-left: 22px;
}

.menu-items li{
    margin-top: 10px;
    padding: 10px;
}

.menu-items li:hover{
    border-radius: 8px;
    background-color: #f1f4f8;
}

<body>
    <ul class="menu-items">
        <li><img src="./images/online.png"><span>Customer Overview</span></li>
        <li><img src="./images/list-dot.png"><span>Reports</span></li>
        <li><img src="./images/file-add.png"><span>File transcodings</span></li>
        <li><img src="./images/notification.png"><span>Notification center</span></li>
    </ul>
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64626407

复制

相似问题

问图标+文本悬停
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图标+文本悬停EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问图标+文本悬停
EN