0

我在图像上显示两个按钮和一个复选框，如下所示

在此处输入图像描述

这些按钮和复选框仅在鼠标指针位于图像上方时显示。当鼠标指针移开时，它们会消失。

这个效果是通过下面的简单 jQuery 代码实现的。

jQuery(function(){
    jQuery(".the-buttons").hide();

    jQuery('.show-image').hover(function(){
        jQuery(this).find('.the-buttons').fadeIn(600);
    },function(){
        jQuery(this).find('.the-buttons').fadeOut(300);
    });
});

相关的 HTML/CSS 如下。

<span class="show-image" style="position: relative;float:left;margin:5px;">                        
    <a href="../product_images/large/3562298873030291049_Winter.jpg">
        <img src="../product_images/medium/3562298873030291049_Winter.jpg" alt="The image is not available"/>
    </a>

    <input type="button" class="the-buttons" name="btnEdit" value="" style="background-image:url(../css/layout/site/tables/action2.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent;position:absolute;top:0;left:0;" title="Click to edit this image." />                        
    <input type="checkbox" class="the-buttons" id="chk" name="chk" title="Check to mark for multiple deletion at once." style="position:absolute;bottom:0;right:0;" value="662"/>
    <input type="submit" class="the-buttons" name="btnDeleteSingle" value="" style="background-image:url(../css/layout/site/tables/action4.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent; text-align:right;position:absolute;top:0;right:0;" title="Click to delete this image." />
</span>

与按钮和复选框一样的静态 CSS 类型是不相关的。show-image具有给定<span>标签、给定按钮和复选框的 CSS 类与the-buttons提供此效果的 jQuery 代码交互。

我还有一个额外的要求。当图像右下角的给定复选框被选中/选择时，它应该永久显示，忽略淡入和淡出效果。然而，图像上显示的另外两个按钮应该具有该效果（当再次取消选中该复选框时，它应该具有该效果）。我尝试过某种方式，但没有成功。这有可能吗？

4

2 回答 2

2

当它被选中时，给它一个定义如下的类：

.always-visible {
    display: inline !important;
}

并使用此代码：

$("#chk").on("click", function () {
    var $this = $(this);
    if ($this.is(":checked")) {
        $this.addClass("always-visible");
    } else {
        $this.removeClass("always-visible");
    }
});

（当然，必要时替换$为）jQuery

现在我认为可能还需要使用此代码进行褪色：

jQuery(this).find('.the-buttons').not('.always-visible').fadeIn(600);
// and
jQuery(this).find('.the-buttons').not('.always-visible').fadeOut(300);
于 2013-04-06T02:46:40.333 回答
1

制作一个检查复选框是否被选中的函数。然后，您可以在图片悬停时执行此操作。

if($('#chk').is(':checked')) {
        get only two of them fading in and out
}

else {
        all of them fading in and out
}

希望这可以帮助。

于 2013-04-06T02:55:36.760 回答