Question

我使用jquery这个脚本：

$(document).ready(function() {
    $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(1000, 1);
        }, function () {
    $span.stop().fadeTo(1000, 0);
        });
    });
});

我有这个CSS代码：

.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}

.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
}

这是我的网站My test site如何使按钮作为单选按钮工作，以便在点击另一个按钮后点击和隐藏后显示图像的第三部分。当显示单击的部件时，悬停功能不应对此按钮起作用。有没有办法做到这一点？

Answer 1

我不确定我是否能正确使用你，但我想这方面的内容应该有所帮助。

的CSS：

.hover{display:none;}

脚本：

$('.a, .b, .c').each(function() {
    var $this = $(this);
    $span = $('<span class="hover"/>');
    $span.hover(function(){$(this).fadeIn()}, function(){ $(this).fadeOut()});
    $this.filter('a').click(function(e) {
        // do something with the click.
        e.stopPropagation(); e.preventDefault();
        $(this).hover = null; // you can save hover function in a var if you want to use it later.
    });
    $this.filter('b').click(function(e) {
        // do something with the click.
        e.stopPropagation(); e.preventDefault();
        $(this).hover = null; // you can save hover function in a var if you want to use it later.
    });
    $this.filter('c').click(function(e) {
        // do something with the click.
        e.stopPropagation(); e.preventDefault();
        $(this).hover = null; // you can save hover function in a var if you want to use it later.
    });

});

Answer 2

现在我有了这个：

脚本：

$(document).ready(function() {
    $(".fg-button")
    .hover(
        function(){ 
            $(this).addClass("ui-state-hover");
        },
        function(){
            $(this).removeClass("ui-state-hover"); 
        }
    )
    .mousedown(function(){
            $(this).parents('.fg-buttonset-single:first').find(".fg-button.ui-state-active").removeClass("ui-state-active");
            if( $(this).is('.ui-state-active') ){ $(this).removeClass("ui-state-active"); }
            else { $(this).addClass("ui-state-active"); }   
    })
    .mouseup(function(){
        if(! $(this).is('.fg-buttonset-single .fg-button') ){
            $(this).removeClass("ui-state-active");
        }
    });
});

CSS：

.fg-button {height: 56px; width: 126px; border: 0px; outline: 0px; cursor:pointer; position: relative; display:block;}
.ui-state-default { clear: both; background: url(images/Fotky.png) no-repeat; background-position: top;}
.ui-state-hover{background: url(images/Fotky.png) no-repeat; background-position: bottom;}
.ui-state-active {background: url(images/Fotky.png) no-repeat; background-position: center;}

HTML：

<div class="fg-buttonset fg-buttonset-single">
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>
<button class="fg-button ui-state-default"></button>

这是我需要的，但没有fadeTo功能。我如何在那里实现它以使其在本页顶部的示例中工作？我做了一些尝试，但没有成功。

此处测试如何运作http://airsoftbanda.tym.sk/css/test.php

这里fadeTo如何运作http://airsoftbanda.tym.sk/css/index.php

Answer 3

最后这是我的最终解决方案，它可以正常工作......

脚本：

$(document).ready(function() {
    $('.fotky,.video,.diskusia,.onas,.zbrane,.akcie,.tabroz,.tabburk,.tabhil,.tablest').append('<span class="hover"></span>').each(function () {
        var $span = $('> span.hover', this).css('opacity', 0);
        $(this).hover(function () {

            $span.stop().fadeTo(1000, 1);
        }, function () {
    $span.stop().fadeTo(1000, 0);
        });

$(".fotky").mousedown(function(){
$(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
  $(this).addClass("fotkyk"); 
$span.stop().fadeTo(1000, 0);
end;    
    });

    $(".video").mousedown(function(){
    $(this).parents('#tlacidlo:first').find(".fotkyk,.videok,.diskusiak,.onask,.zbranek,.akciek").removeClass("fotkyk videok diskusiak onask zbranek akciek");
$(this).addClass("videok");
$span.stop().fadeTo(1000, 0);   
    });

CSS：

#tlacidlo {
height: 400px;
width: 126px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
.fotky {
clear: both;
position:relative;
display:block;
height: 56px;
width: 126px;
background:url(images/Fotky.png) no-repeat;
background-position: top;
cursor: pointer;
}
.fotky span.hover {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: bottom;
    }
.fotkyk {
position: relative;
display: block;
height: 56px;
width: 126px;
background: url(images/Fotky.png) no-repeat;
background-position: center;
}

HTML：

<div id="tlacidlo">
<a href="#" class="fotky"></a>
<a href="#" class="video"></a>
<a href="#" class="diskusia"></a>
<a href="#" class="onas"></a>
<a href="#" class="zbrane"></a>
<a href="#" class="akcie"></a>
</div>

请注意，它只是代码的一部分，因为它在script和css上重复几乎相同。

具有淡入淡出功能的网页单选按钮

3 个答案: