我需要一個具有以下特征的按鈕：用戶單擊按鈕的左側部分 - “編輯”，然后將他們帶到一個表單。用戶單擊右側部分，它會出現一個子列表菜單的下拉菜單。我使用兩個單獨的按鈕編寫了下面的代碼片段，我采用了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 關注
- 193 瀏覽
添加回答
舉報
0/150
提交
取消