Question

我写了一个带有图像动画的广播列表。当它被悬停并检查时，它可以变为另一个图像。它可以在所有浏览器上运行，但在IE上，当我将它悬停在它上面时它不起作用。我不知道我是否写了一些错误或错过了一些问题？ html是：

{% set newtotal = 0 %}
{% for item in daily: %}
    {% set newtotal = newtotal + item[10]|float %}
{% endfor %}

<div class="bottom">
    <span>Total: {{ newtotal }}</span>
</div>

我的css是：

{{ newtotal }}

它的所有浏览器都可以工作，但是不能正常工作任何人都可以帮我解决这个问题吗？

在线演示位于页面底部： Cloud Foundry's UAA

Answer 1

尝试以下方法。我在标签后直接访问女班，因为.gender和.female都是兄弟姐妹。

.user-form ul li label.gender.female {
background-image: url(../images/female.png);
}

.user-form input[type=radio]:checked ~ label .female,
.user-form input[type=radio]:hover ~ label .female {
background-image: url(../images/female-checked.png);
}

Answer 2

您的示例适用于现代浏览器，因为它们将鼠标悬停在您的标签元素上，就像您将鼠标悬停在无线电元素本身上一样，即使无线电元素设置为visibility:hidden。 IE并没有这样做。您必须明确地将鼠标悬停在无线电元素上 - 这是因为您已隐藏它而无法做到 - 以查看您的input[type=radio]:hover样式。

我建议您更改背景 - label:hover而不是input[type=radio]:hover上的图像。以下代码可能适合您。

.user-form input[type=radio]:checked ~ label.gender.female,
.user-form label.gender.female:hover {
   background-image: url(../images/female-checked.png);
}

使用它并让我知道它是怎么回事.☺

如果我找到一个不太苛刻的解决方案，我会更新。

单选按钮悬停时无法更改背景图像

2 个答案: