我需要一个具有以下特征的按钮：用户单击按钮的左侧部分 - “编辑”，然后将他们带到一个表单。用户单击右侧部分，它会出现一个子列表菜单的下拉菜单。我使用两个单独的按钮编写了下面的代码片段，我采用了w3school的方法，它看起来像我想要的，除了：当我将其悬停时，每个按钮都有自己的独立悬停行为，而不是一起执行。当我驻留在浏览器中时，此按钮分为不同的行。我该如何弥补这些缺陷？或者如果有一个像这样的开箱即用的按钮更好？我尝试用谷歌搜索“带有侧面菜单的按钮”，“按钮侧面下拉菜单”，按钮子菜单“等......但到目前为止没有运气。.leftSideButton { box-shadow:inset 0px 1px 3px 0px #91b8b3; background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%); background-color:#64c1c9; border-radius:5px 2px 2px 5px; border:1px solid #566963; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:11px 23px; text-decoration:none; text-shadow:0px -1px 0px #2b665e; }.leftSideButton:hover { background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%); background-color:#6c7c7c;}.leftSideButton:active { position:relative; top:1px;}.rightSideButton { box-shadow:inset 0px 1px 3px 0px #91b8b3; background:linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%); background-color:#64c1c9; border-radius:2px 5px 5px 2px; border:1px solid #566963; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:11px 13px; text-decoration:none; text-shadow:0px -1px 0px #2b665e; margin-left: -4px;}.rightSideButton:hover { background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%); background-color:#6c7c7c;}.rightSideButton:active { position:relative; top:1px;} .splitButton{ display: block;}.btn-group leftSideButton:hover { background:linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%); background-color:#6c7c7c;}<html><head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><div class="btn-group"><button class="leftSideButton">Edit</button> <button class="rightSideButton"><i class="fa fa-caret-down"></i> </button></div></body></html>
2 回答
海绵宝宝撒
TA贡献1809条经验 获得超8个赞
将悬停移动到父 div，然后将样式应用到两个按钮。
.leftSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 5px 2px 2px 5px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 23px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
}
.leftSideButton:active {
position: relative;
top: 1px;
}
.rightSideButton {
box-shadow: inset 0px 1px 3px 0px #91b8b3;
background: linear-gradient(to bottom, #68c6d0 5%, #55a2aa 100%);
background-color: #64c1c9;
border-radius: 2px 5px 5px 2px;
border: 1px solid #566963;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 11px 13px;
text-decoration: none;
text-shadow: 0px -1px 0px #2b665e;
margin-left: -4px;
}
.rightSideButton:hover {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
.rightSideButton:active {
position: relative;
top: 1px;
}
.splitButton {
display: block;
}
/* changes */
.btn-group {
/* Shrink the parent to fit the content */
display: inline-flex;
}
.btn-group:hover .rightSideButton,
.btn-group:hover .leftSideButton {
background: linear-gradient(to bottom, #55a2aa 5%, #68c6d0 100%);
background-color: #6c7c7c;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="btn-group">
<button class="leftSideButton">Edit</button>
<button class="rightSideButton">
<i class="fa fa-caret-down"></i>
</button>
</div>
德玛西亚99
TA贡献1770条经验 获得超3个赞
当我将其悬停时，每个按钮都有自己的独立悬停行为，而不是一起执行。
.btn-group leftSideButton:hover{...}从你的 CSS 中删除。您已经为之前声明的每个按钮提供了这种悬停效果。
当我驻留在浏览器中时，此按钮分为不同的行。
添加.btn-group{ display: flex; flex-wrap: nowrap; }到你的 CSS 中。
- 2 回答
- 0 关注
- 61 浏览
添加回答
举报
0/150
提交
取消