悬停时分割按钮

时间:2011-06-13 01:57:30

标签: php javascript html

我正在寻找一种解决方案,将一个基于图形的按钮悬停为两个。两个按钮都有一个指向网站的链接。 我需要用HTML,JS或PHP来做这件事。

如何管理?

澄清更新

  1. 我的索引页面上有一个显示“Enter”的大按钮图形。
  2. 通过按钮,“输入”按钮消失
  3. 两个新按钮显示在该确切位置。
  4. 第一个说“英文版”,另一个说“西班牙文版”
  5. 当鼠标离开该区域时,原始按钮显示备份,两个语言按钮消失

2 个答案:

答案 0 :(得分:3)

您可以使用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 -->

答案 1 :(得分:0)

这不一定很复杂。不要乱搞一堆按钮操作,只需在前层使用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相同的高度,以及宽度的一半。然后将它们链接到您想要的任何页面。

  4. 所以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代替vanilla javascript(它会让您的生活更轻松)。当你将鼠标悬停在它上面时,这将隐藏“输入”div,显示你可以点击的两个img元素:

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

    希望有所帮助。