0

我有 2 种不同的 jquery 效果我想应用于表单单选按钮，一方面我有按钮的悬停效果，另一方面我有所选单选按钮的背景颜色更改。这是代码：

对于悬停：

$(".label_radio").hover(function () {
    $(this).css("background-color", "silver");
},function () {
    $(this).css("background-color", "transparent");
});

对于所选项目：

$("#uno").click(function () {
    $("#cambiar").css("background-image", "url(../wp-content/uploads/blanco2patas.jpg)");
    $("#BU").css("background", "red");
    $("#BT").css("background", "transparent");
    $("#NU").css("background", "transparent");
    $("#NT").css("background", "transparent");
});
$("#dos").click(function () {
    $("#cambiar").css("background-image", "url(../wp-content/uploads/blanco4patas.jpg)");
    $("#BU").css("background", "transparent");
    $("#BT").css("background", "red");
    $("#NU").css("background", "transparent");
    $("#NT").css("background", "transparent");
});
$("#tres").click(function () {
    $("#cambiar").css("background-image", "url(../wp-content/uploads/negro2patas.jpg)");
    $("#BU").css("background", "transparent");
    $("#BT").css("background", "transparent");
    $("#NU").css("background", "red");
    $("#NT").css("background", "transparent");
});
$("#cuatro").click(function () {
    $("#cambiar").css("background-image", "url(../wp-content/uploads/negro4patas.jpg)");
    $("#BU").css("background", "transparent");
    $("#BT").css("background", "transparent");
    $("#NU").css("background", "transparent");
    $("#NT").css("background", "red");
});

我的问题是，当我尝试应用悬停效果时，当我将鼠标悬停在所选元素上时，它会触发悬停效果，但是当我移除鼠标时，它不会显示所选效果。它应该保持红色，但我得到透明元素

4

1 回答 1

1

这里有一点代码味道。

您一遍又一遍地重复相同的功能，而不是使用上下文选择器（即this关键字）

因此，不要使用 uno、does、tres、cuatro - 它们都是多余的（因为您可以使用:nth-child选择器来定位特定元素）而不是语义 - 您应该对所有使用一个类，对这个类使用一个事件侦听器，并找到使用this关键字单击的元素。

就像是：

$(".myClass").click(function () {

    clicked_el = $(this);

    // then do something with clicked element (e.g. clicked_el.show())

});

编辑：至于您的问题，您明确告诉 JQuery 使用transparent背景 on mouseleave(hover只是组合两个相关事件的便捷功能：mouseenter和mouseleave)。

这种样式（即先是银色mouseenter，然后是透明的mouseleave）取代了您的background:red

如果您希望保留选定的红色背景，您应该再次考虑另一种方法，例如使用该addClass()方法向选定元素添加一个类（记住 的上下文魔法this），并在样式表中为该类定义 CSS 规则。这也是一种更语义化的方式，因为类名（例如 selected_radio）反映了您正在做的事情，而不仅仅是background:red;.

但仅此一项并不能解决您的问题，因为您目前使用内联样式来实现悬停效果，并且它仍然会优先于selected类，方法是用其压倒性的weight覆盖它。

因此，悬停影响应该通过删除额外的样式以恢复默认值来消除，而不是通过声明覆盖默认值的积极样式（background:transparent甚至background:none;是积极声明）来消除。

所以再次问自己：我真的需要 JS 来实现悬停效果还是有点矫枉过正？为什么不使用 CSS:hover伪选择器？

于 2013-05-16T11:12:00.513 回答