Jquery 我如何添加类。使用鼠标悬停而不是单击

我试图让我的星级评分器在单击容器div中的5个表列之一时保持我使用的精灵的背景位置。在鼠标上方，我添加了一个样式属性来实现这一点，但当我单击并添加一个具有相同css的类时，它不会影响背景位置。默认情况下，我添加了这个类，但它仍然不起作用。我想这实际上是一个css问题

以下是我正在使用的代码：

---

非常感谢您的帮助。这对我来说真是个棘手的问题。

由于您的图像资源（已删除的图像路径）需要身份验证，因此很难准确地看到发生了什么

但是，我可以看出，您并没有真正按照预期使用jQuery api：

要删除类，应使用

.removeClass（）

添加和删除样式有

.css（）

对于添加和删除值，有

.val（）

对于mouseover/mouseout，有

.hover（）

---

我会先改变这些，看看问题是否依然存在。否则，您需要将stars图像放在公共位置，以便我们可以看到您的代码的运行情况

由于您的图像资源（删除的图像路径）需要身份验证，因此很难准确地看到发生了什么

但是，我可以看出，您并没有真正按照预期使用jQuery api：

要删除类，应使用

.removeClass（）

添加和删除样式有

.css（）

对于添加和删除值，有

.val（）

对于mouseover/mouseout，有

.hover（）

---

我会先改变这些，看看问题是否依然存在。否则，您需要将stars图像放在公共位置，以便我们可以看到您的代码运行

您只需将id添加到

td

而不添加到div

看看这个

---

希望有帮助。

您只需将id添加到

td

而不是div

看看这个

希望有帮助。

您有以下规则：

#rating 
{
   background: ...;
}

.star3
{
   background: ...;
}

然后这个规则：

#rating 
{
   background: ...;
}

.star3
{
   background: ...;
}

这两个元素同时应用于同一个元素，但由于，具有id（

#rating

）的元素将覆盖具有类（

.star3

）的元素，因此添加

.class3

对呈现页面没有任何影响

将

.star3

更改为

#rating.star3

可以解决问题：

您有以下规则：

#rating 
{
   background: ...;
}

.star3
{
   background: ...;
}

然后这个规则：

#rating 
{
   background: ...;
}

.star3
{
   background: ...;
}

这两个元素同时应用于同一个元素，但由于，具有id（

#rating

）的元素将覆盖具有类（

.star3

）的元素，因此添加

.class3

对呈现页面没有任何影响

---

将

.star3

更改为

#rating.star3

可以解决问题：

这里有一个比jQuery简单得多的解决方案。你可能会发现它以一种实用的方式教给你很多更先进的技术

我已经对代码进行了相当广泛的注释。如果你有任何问题，请告诉我

请注意，我的解决方案取决于@Abhi Beckert的关键观察结果，因此他应该得到公认的答案

代码如下：

以下是新的HTML：

<div id="rating">
    <table>
        <tr>
            <td><div id="1star" data-stars="1"></div></td>
            <td><div id="2star" data-stars="2"></div></td>
            <td><div id="3star" data-stars="3"></div></td>
            <td><div id="4star" data-stars="4"></div></td>
            <td><div id="5star" data-stars="5"></div></td>
        </tr>
    </table>
</div>
<input type="hidden" id="stars" />

---

这里有一个比jQuery简洁得多的解决方案。你可能会发现它以一种实用的方式教给你很多更先进的技术

我已经对代码进行了相当广泛的注释。如果你有任何问题，请告诉我

请注意，我的解决方案取决于@Abhi Beckert的关键观察结果，因此他应该得到公认的答案

代码如下：

以下是新的HTML：

<div id="rating">
    <table>
        <tr>
            <td><div id="1star" data-stars="1"></div></td>
            <td><div id="2star" data-stars="2"></div></td>
            <td><div id="3star" data-stars="3"></div></td>
            <td><div id="4star" data-stars="4"></div></td>
            <td><div id="5star" data-stars="5"></div></td>
        </tr>
    </table>
</div>
<input type="hidden" id="stars" />

---

您可以将您的stars图像上载到不需要身份验证的服务器吗？我已将图像更改为从另一个服务器提取。现在应该可以了。很抱歉。您可以将您的stars图像上载到不需要身份验证的服务器吗？我已将图像更改为从另一台服务器提取。现在应该可以了。对不起，谢谢，我试试看。同时，如果你现在想看到它的运行，我已经修复了这个图像。对不起，谢谢，我试试看。同时，如果你现在想看到它的运行，我已经修复了这个图像。很抱歉。