小编gom*_*zfx的帖子

在 AEM 中，我需要配置一个字符串列表并在多个服务之间共享它。实现这一目标的最佳方法是什么？该列表需要在运行时可配置。

我正在尝试在悬停时更改列表项的颜色,包括项目符号/数字和文本.我在谷歌浏览器中遇到问题,只有文字正在改变颜色.我错过了什么吗？

HTML:

<ul>
    <li>test</li>
</ul>

<ol>
    <li>test</li>
</ol>

CSS:

ol li:hover,
ul li:hover {
    color: red;
}

JSFiddle:https://jsfiddle.net/yf0yff1c/2/

悬停时，我尝试使用CSS过渡来交换背景图片。但是，在Safari中，动画期间图像会缩小，我不确定为什么。

.icon {
  background-color: white;
  width: 100px;
  height: 100px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS44OSA4MS44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM4YjkyYTE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmljb24tc2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjM1LjU5IiBjeT0iMzUuNTkiIHI9IjMyLjU5Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iNTguNjMiIHkxPSI1OC42MyIgeDI9Ijc5Ljc3IiB5Mj0iNzkuNzciLz48L3N2Zz4=);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  transition: all 1s;
}

.icon:hover {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS44OSA4MS44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM1YTJhODI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmljb24tc2VhcmNoLXB1cnBsZTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIzNS41OSIgY3k9IjM1LjU5IiByPSIzMi41OSIvPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjU4LjYzIiB5MT0iNTguNjMiIHgyPSI3OS43NyIgeTI9Ijc5Ljc3Ii8+PC9zdmc+);
 }

https://jsfiddle.net/Lfqucz82/