javascript - 具有 fadeto 功能的网页单选按钮

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.
    });

});