Question

我有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");
});

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

Answer 1

这里有一点代码味道。

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

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

类似的东西：

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

    clicked_el = $(this);

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

});

编辑：至于您的问题，您明确告诉JQuery在transparent上使用mouseleave背景（hover仅仅是一个便利函数，用于组合两个相关事件：{{1}和mouseenter）。

此样式（即首先是银mouseleave，然后是透明mouseenter）替换您的mouseleave

如果您希望保留选定的红色背景，您应该再考虑一种不同的方法，例如使用background:red方法向所选元素添加一个类（请记住addClass()的上下文魔力），并在样式表中定义该类的CSS规则。这也是一种更加语义的方式，因为类名称（例如selected_radio）反映的是你所做的比this更好。

但仅此一项并不能解决您的问题，因为您目前使用内联样式处理悬停效果，并且它仍然优先于background:red;类覆盖它的破碎重量。

因此，应该通过删除其他样式来删除悬停影响以恢复默认值，而不是通过声明正面样式（和{{1}或者甚至selected是正面陈述），它会覆盖默认值。

所以再次问自己：我是否真的需要JS来悬停效果还是一个矫枉过正？为什么不使用CSS background:transparent伪选择器？

将效果与jquery相结合

1 个答案: