Question

顶部nov的facebook徽标在悬停时消失。我应用了css渐变，除了fb徽标本身之外没有图像。有没有办法让徽标在悬停状态下保持可见？

谢谢！

Answer 1

您需要使用多个背景，因为在悬停时，脸部会被渐变覆盖。

ul#topnav li.facebook a:hover {
background-image: url("../pics/facebook-icon.png"),
            linear-gradient(center top , #444444 0%, #A1A1A1 6%, #575757 100%);
/* facebook icon is on top of a linear gradient */
background-repeat: no-repeat, repeat;
background-position: 8px 2px, 0 0;
}

当然，您需要为所有供应商前缀添加此规则。（-moz-，-webkit-，...）

Answer 2

或者，您可以将图标与背景分开。也就是说，使用CSS将图标放在“facebook”文本之前，这样它就完全独立于背景选择器。像这样：

li.facebook a::before {

content: "";
position: absolute;
top: 50%;
left: 0;
width: 16px; /* Width of your FB icon */
height: 16px; /* Height of your FB icon */
margin-top: -9px;
background-image: url("path_to_your_FB_icon.png");
background-repeat: no-repeat;

}

希望有所帮助！

CSS渐变，背景图像在悬停时消失

2 个答案: