悬停上的拆分按钮

如何解决悬停上的拆分按钮

| 我正在寻找一种解决方案，将鼠标悬停在一个基于图形的按钮上一分为二。这两个按钮都将具有指向网站的链接。 我需要使用HTML，JS或PHP执行此操作。 如何管理？ 更新说明 我的索引页面上有一个大按钮图形，上面写着“ Enter”。 移过按钮，“输入”按钮消失 在该确切位置上将显示两个新按钮。 第一个说“英文版”，另一个说“西班牙语版” 当鼠标离开该区域时，原始按钮将显示回来，并且两个语言按钮消失     

解决方法

        您可以将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 -->

    ,        这不必很复杂。不用搞乱按钮操作，只需在顶层的“ enter”按钮上使用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（这样会使您的生活更加轻松）。只要将鼠标悬停在div上，它就会隐藏\“ enter \” div，显示两个img元素，然后可以单击它们：

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

希望能有所帮助。