带侧面下拉菜单的 CSS 拆分按钮
我需要一个具有以下特征的按钮：
用户单击按钮的左侧部分 - “编辑”，然后将他们带到一个表单。
用户单击右侧部分，它会出现一个子列表菜单的下拉菜单。
我使用两个单独的按钮编写了下面的代码片段，我采用了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回答
-
海绵宝宝撒
将悬停移动到父 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
当我将其悬停时，每个按钮都有自己的独立悬停行为，而不是一起执行。.btn-group leftSideButton:hover{...}从你的 CSS 中删除。您已经为之前声明的每个按钮提供了这种悬停效果。当我驻留在浏览器中时，此按钮分为不同的行。添加.btn-group{ display: flex; flex-wrap: nowrap; }到你的 CSS 中。
随时随地看视频慕课网APP
相关分类
Html5