悬停分裂按钮

Question

我正在寻找一个解决方案，在悬停，一个图形为基础的按钮分裂成两个。这两个按钮将有一个链接到一个网站。我需要用HTML、JS或PHP来完成这个任务。

怎样才能管理呢？

用于澄清的更新

1. 我的索引页面上有一个大按钮图形，上面写着"Enter“。
2. 通过检查按钮，"enter“按钮就会消失。
3. 在那个准确的位置上出现了两个新按钮。
4. 第一个版本是“英文版”，另一个版本是“西班牙语版本”。
5. 当鼠标离开这个区域时，原来的按钮会显示出来，两个语言按钮消失。

Answer 1

您可以使用jquery和jqueryui.Button的javascript来完成这一任务。

来自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 -->

Answer 2

这不一定很复杂。不要乱搞一堆按钮操作，只需使用div背景图像为您的“进入”按钮在前面一层，然后将两个链接的图像在它下面。当你悬停在div上时，前一层会隐藏，露出下面的两个按钮。更多详细信息：

1. 创建一个具有显式定义的高度和宽度以及<div id="wrapper">的position:relative元素。这将是包含您的大提交按钮以及您的两个“拆分”按钮的div。
2. 在包装器内创建一个宽度和高度相同的<div id="enter">。将css background-image设置为您希望它显示的任何内容。另外，设置这些css属性：position:absolute; top:0, left:0; z-index:5;
3. 还在包装器中创建两个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 (这将使您的生活更加轻松)。这将在悬停时隐藏"enter“div，显示两个img元素，然后单击：

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

希望这能有所帮助。