Question

我有一个元素，当有人在它上面悬停时，应该更改dcast(melt(setDT(df1), id.var=c('ID1', 'ID2'), na.rm=TRUE), ID1+ID2~variable, value.var='value')。但是，背景图像的SVG为background-image s。

它在Webkit浏览器（Chrome，Safari，Opera）上运行良好，在IE上运行良好。

然而，在Firefox上，每当我悬停时，图像就会变成空白。当我尝试通过检查元素并且可能改变颜色或其他一些不相关的风格来摆弄它时，图像神奇地出现。

这里出了什么问题，如何解决？

这是我的CSS：

data-uri

和我的HTML：

.info .comment{
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23D9D9D9"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    color: #D9D9D9;
    display: inline-block;
}

.info:hover .comment, .info:visited .comment{
    background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23CCCCCC"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
}

.info:hover {
color:#CCCCCC
}

Answer 1

这是因为订单在使用任何pseudo-class时都很重要。 Firefox尊重:visited上的CSS spec，而基于webkit的浏览器将允许，因为它们在spec时更加宽松。

codepen中的示例：

http://codepen.io/jonathan/pen/GpVXMN

jsfiddle中的相同示例：

http://jsfiddle.net/98assuba/1/

使用:link时，您需要确保使用伪类:visited。

由于规范要求:link必须在:visited之前。因此，由于您要将其添加到与:hover相同的CSS规则中，因此您必须将其添加到.info .comment规则的默认状态。

因此，将行.info:link .comment添加到与.info .comment

相同的CSS规则中

在.info:visited .comment

之前移动.info:hover .comment

.info:link .comment, /* add this line */
.info .comment{
     background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23D9D9D9"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
     background-repeat: no-repeat;
     background-size: contain;
     width: 20px;
     height: 20px;
     color: #D9D9D9;
     display: inline-block;
}

.info:visited .comment, /* add this before :hover */
.info:hover .comment{
     background-image: url('data:image/svg+xml;charset=utf-8,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20fill%3D"%23CCCCCC"%20width%3D"25px"%20height%3D"25px">%0D%0A%20<path%20d%3D"M11.5%201C5.159441000000001%201%200%205.54683583%200%2011.1341066C0%2013.8432911%201.2135882000000038%2016.305879%203.1855000000000047%2018.1266402C3.3234999999999957%2018.2536543%203.4046764999999937%2018.4293122%203.4046764999999937%2018.6164553L3.4046764999999937%2024.1449483C3.2423234999999977%2024.7442118%203.9045882000000063%2025.2259197%204.426147099999994%2024.8887917L8.889499999999998%2021.2411889C9.039676%2021.118904%209.233823999999998%2021.0702603%209.425264999999996%2021.1006627C10.098353000000003%2021.210111%2010.791735000000003%2021.2682132%2011.5%2021.2682132C17.841234999999998%2021.2682132%2023%2016.722053%2023%2011.1341066C23%205.54683583%2017.841234999999998%201%2011.5%201"%2F>%0D%0A%0D%0A%0D%0A<%2Fsvg>');
}

.info:hover {
     color:#CCCCCC
}

摘自:visited的Firefox MDN CSS参考文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

：访问过的CSS伪类只允许您选择已访问过的链接。任何其他与链接相关的伪类都可以覆盖此样式，即：link，：hover和：active，出现在后续规则中。为了设置适当的链接样式，您需要将：visited规则放在：link规则之后但在其他之前，在LVHA顺序中定义:: link - ：visited - ：hover - ：active。

用于伪类:visited的W3C规范

http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes

所以请记住始终按照特定顺序放置伪类（即使是针对同一元素的不同规则）：

LVHA订单:: link - ：visited - ：hover - ：active

换句话说，你可以记住这样的顺序：

L ord V ader的 H andle以前 A nakin

对伪类使用正确的顺序后，浏览器将一致地正确呈现。

在Firefox中悬停时，div background-image变为空白？

1 个答案: