單選按鈕的網頁與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

最後，這是我的最終解決方案，它的工作原理，因爲我需要......

腳本：

$(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> 

caurse它是因爲它是重複的腳本和CSS幾乎相同的代碼只是一部分。

Answer 2

不知道我是否正確地得到你，但我想沿着這條線應該有所幫助。

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 3

所以現在我有這樣的：

腳本：

$(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