懸停時的拆分按鈕

我正在尋找一種解決方案，將一個基於圖形的按鈕懸停在兩個上。兩個按鈕都會有一個鏈接到一個網站。我需要用HTML，JS或PHP來做到這一點。懸停時的拆分按鈕

如何管理？

更新澄清

有我的索引頁上的一大按鈕圖片，上面寫着「Enter」鍵。
通過點擊按鈕「輸入」按鈕消失
兩個新的按鈕顯示在該確切的位置。
第一個說「英語版」，另一個「西班牙版」
當鼠標離開該地區，原來的按鈕會顯示備份和兩個語言按鈕消失

來源

2011-06-13 Tom

當鼠標離開按鈕過去的區域時，是否想讓按鈕合併回去？ – 2011-06-13 02:01:08

是的。我想要歸檔的是：我的索引頁上有一個很大的按鈕圖形，顯示「Enter」。通過查看按鈕，「輸入」按鈕消失，兩個新按鈕顯示在該位置上。第一個是「英文版」，另一個是「西班牙文版」。 – Tom 2011-06-13 02:24:40

你可以做到這一點使用JavaScript和jQuery和jqueryui.Button從jQueryUI的網站

實施例：

http://jqueryui.com/demos/button/#splitbutton

<script> 
    $(function() { 
     $("#rerun") 
      .button() 
      .click(function() { 
       alert("Running the last action"); 
      }) 
      .next() 
       .button({ 
        text: false, 
        icons: { 
         primary: "ui-icon-triangle-1-s" 
        } 
       }) 
       .click(function() { 
        alert("Could display a menu to select an action"); 
       }) 
       .parent() 
        .buttonset(); 
    }); 
</script> 

<div class="demo"> 

<div> 
    <button id="rerun">Run last action</button> 
    <button id="select">Select an action</button> 
</div> 

</div><!-- End demo -->

來源

2011-06-13 02:03:28 Swift

這並不一定很複雜。而不是亂搞一堆按鈕操作，只需在前一層使用div背景圖像作爲「輸入」按鈕，然後在其下面放置兩個鏈接的圖像。當你將鼠標懸停在div上時，前面的圖層隱藏，顯示下面的兩個按鈕。更多細節：

具有明確定義的高度和寬度和position:relative創建<div id="wrapper">元件。這將是包含您的大提交按鈕以及您的兩個「分割」按鈕的div。
創建一個<div id="enter">包裝內具有相同的寬度和高度。將css background-image設置爲您想要顯示的內容。另外，設置這些CSS屬性：position:absolute; top:0, left:0; z-index:5;
在包裝器中也創建兩個img元素。這兩個應該沒有邊距/填充/邊框，與包裝div相同的高度，以及寬度的一半。然後將它們鏈接到你想要的任何頁面。

因此HTML會是這個樣子：

<div id="wrapper"> 
    <div id="enter"></div> <!-- in front of the imgs. fades out when mouseover #wrapper --> 
    <a href="#"><img src="#" /></a> <!-- which reveals these two images --> 
    <A href="#"><img src="#" /></a> 
</div>

我建議你使用jQuery代替香草的JavaScript（它會讓你的生活變得更加簡單）。這將隱藏的「輸入」分區，只要你在它懸停，露出兩個IMG元素，然後可以點擊：

$('#wrapper').hover(function(){ 
    $('#enter').fadeOut(); 
}, function(){ 
    $('#enter').fadeIn(); 
}

希望有所幫助。

來源

2011-06-13 03:24:07

懸停時的拆分按鈕

回答

相關問題