<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
标签 javascript jquery html css svg
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
这是我正在尝试做的事情:
overlapping buttons http://dev.960design.com/98a5fad8-c3ed-4014-a732-15145a233b83.png
我希望红色、蓝色和绿色区域是可点击的链接，而不会在 HTML5 网页中重叠。例如，如果我将鼠标悬停或点击蓝色“B”圆圈的最右边缘，我不想点击绿色。我还希望链接之间的“空白”处于非事件状态(当您从红色悬停到蓝色再到绿色时，hover:pointer 会有点“闪烁”)。
我最初的想法:SVG 按钮。创建/实现 svg 按钮没问题，但可点击区域( View 框？)给我带来了问题。
那么实现这一目标的最佳方法是什么？
这是我对 SVG 的尝试...
<a href="#">
<svg>
<path id="button-svg-right" d="M0,100 L100,100 L100,0 L0,0 C27.6142375,0 50,22.3857625 50,50 C50,77.6142375 27.6142375,100 0,100 L0,100 Z"></path>
</svg>
</a>
最佳答案
添加中央absolute白色<span>不是按钮的圆圈。
尝试填充、边框，直到获得所需的尺寸。
.btns{
position: relative;
height: 30px;
}
.btns button{
cursor:pointer;
outline: none;
border:none;
height: inherit;
width: 50px;
color: #fff;
font-weight:bold;
font-size:24px;
}
.btns button:hover{
opacity:0.7;
}
.btns > button:first-child{
background: red;
padding-right:20px;
}
.btns > button:last-child{
background: green;
padding-left:20px;
}
.btns span{
left: 32px;
position: absolute;
z-index:1;
width: 30px;
height: inherit;
border-radius: 50%;
background: #fff;
border: 5px solid #fff; margin-top:-5px;
}
.btns span button{
width: inherit; border-radius: inherit;
background: blue;
}<span class="btns">
<button>-</button>
<span>
<button>B</button>
</span>
<button>+</button>
</span>关于javascript - 如何最好地编写重叠的 html 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36927797/