我正在寻找一种解决方案,将一个基于图形的按钮悬停为两个。两个按钮都有一个指向网站的链接。 我需要用HTML,JS或PHP来做这件事。
如何管理?
澄清更新
答案 0 :(得分:3)
您可以使用javascript与jquery和jqueryui.Button
进行此操作来自jqueryui网站的示例:
<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上时,前面层隐藏,露出下面的两个按钮。更多细节:
创建一个<div id="wrapper">
元素,其中包含明确定义的高度和宽度position:relative
。这将是包含您的大提交按钮以及两个“分割”按钮的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代替vanilla javascript(它会让您的生活更轻松)。当你将鼠标悬停在它上面时,这将隐藏“输入”div,显示你可以点击的两个img元素:
$('#wrapper').hover(function(){
$('#enter').fadeOut();
}, function(){
$('#enter').fadeIn();
}
希望有所帮助。