0

我正在尝试在未选中复选框时启用悬停（添加'.add_link_twitter_hover'类）并在选中复选框后禁用它（删除'.add_link_twitter_hover'类），就像Pinterest对Twitter/Facebook复选框一样用户添加了一个 pin： 在此处输入图像描述

我试过这个，但是一旦鼠标指针离开，它就不会禁用悬停（不会删除'.add_link_twitter_hover'类）：

   var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
            $(this).parent().removeClass(hoverTwitter);
    $(this).parent().toggleClass(activePostTwitter);
});


$("label.add_link_twitter").hover(function(e) {
    if($("input.publish_to_twitter").is(":checked")) {
          $(this).removeClass(hoverTwitter);
      return;
    }
    $(this).addClass(hoverTwitter);
});

知道如何在未选中复选框时启用悬停并在选中复选框后禁用它？提前致谢！

这是jQuery：

var postTwitter = ".add_link_twitter"; 
var activePostTwitter = "active"; 
$(postTwitter + " input").click(function(e) {
    $(this).parent().toggleClass(activePostTwitter);
});

这是html：

<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>

这是CSS：

.add_link_twitter{
    position:absolute;
    left:15px;
    bottom:16px;
    color: #a19486;
    border: 2px solid transparent;
    border-color: #F0EDE8;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.active {
    border-color: #468BD0;
    color: #468BD0;
    background-color: whiteSmoke;
}

.add_link_twitter_hover
{
    color: #A19486;
    border: 2px solid transparent;
    border-color: #C2B1A2;
    border-radius: 4px;
    background-color: white;
    padding: 7px;
    padding-top: 5px;
    padding-bottom: 5px;
}
4

2 回答 2

1

试试这个：

$("label.add_link_twitter").hover(function(e) {
    if(!$("input.publish_to_twitter").is(":checked"))
          $(this).addClass(hoverTwitter);
}, function() {
    $(this).removeClass(hoverTwitter);
});

使用该方法的常用.hover()方法是提供两个函数：第一个函数在鼠标移到相关元素上时调用，第二个函数在鼠标移出时调用。

所以我上面所做的是在第一个函数（mouseenter）中，如果未选中复选框，我已经添加了你的类。在第二个函数（mouseleave）中，我只是删除了这个类。

于 2012-08-24T22:10:21.337 回答
1

这可以在没有任何 javascript 的情况下完成。如果您希望始终拥有“publish_to_twitter”类，只需使用伪类将两个状态分开：

.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}

我在选择器中添加了输入元素，以确保选中的样式优先。只需确保对于您使用 :hover 设置的每种样式，您在 :checked 中都有相同的样式。

于 2012-08-24T22:42:08.780 回答