html - zurb foundation中的图标如何反转、反转、悬停?

标签 html css zurb-foundation zurb-foundation-5

如何颠倒、反转、否定(应该怎么调用它?)Zurb Foundation 中的图标?

这让我在背景颜色图标上有一个前景。

<i class="fi-marker"></i>

但我想要前景图标上的背景。我以为只是改个名字,还是加个类?

playground page在悬停时显示它似乎没有任何问题,所以我认为这是一件微不足道的事情:

black on white icons white on black icons

最佳答案

看起来他们刚刚在几个元素上设置了一些样式。这是我从 playground page 中提取的一些样式.

.f-dropdown li:hover, .f-dropdown li:focus {
    background: #eeeeee
}

.f-dropdown.content:hover li {
    background:transparent;
}

.f-dropdown.content:hover {
    background:#000;
}

.f-dropdown.content:hover i {
    color: #FFF;
}

希望这对您有所帮助!

关于html - zurb foundation中的图标如何反转、反转、悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28740998/

相关文章:

html - 根据屏幕大小调整图像大小并使其与所有浏览器兼容,无需滚动或 javascript

html - 选取框替换在 Safari 5.1.7 (Windows 10) 上不起作用

css - :last-child does not select the last element

javascript - 让箭头指向特定的 (x, y) 点

javascript - 如何使用 angularjs 或 javascript 添加上一个/下一个选项?

html - 在 IE7 中使用跨度对齐的 CSS

javascript - Foundation 6 网格编程列删除

html - 如何使用源链接 react.js 中的图像

javascript - 将一个类添加到所有下一个元素,直到有类的子元素

javascript - Zurb Foundation Offcanvas 菜单在以编程方式切换后停止工作