我需要一個(gè)具有以下特征的按鈕：用戶單擊按鈕的左側(cè)部分 - “編輯”，然后將他們帶到一個(gè)表單。用戶單擊右側(cè)部分，它會(huì)出現(xiàn)一個(gè)子列表菜單的下拉菜單。我使用兩個(gè)單獨(dú)的按鈕編寫(xiě)了下面的代碼片段，我采用了w3school的方法，它看起來(lái)像我想要的，除了：當(dāng)我將其懸停時(shí)，每個(gè)按鈕都有自己的獨(dú)立懸停行為，而不是一起執(zhí)行。當(dāng)我駐留在瀏覽器中時(shí)，此按鈕分為不同的行。我該如何彌補(bǔ)這些缺陷？或者如果有一個(gè)像這樣的開(kāi)箱即用的按鈕更好？我嘗試用谷歌搜索“帶有側(cè)面菜單的按鈕”，“按鈕側(cè)面下拉菜單”，按鈕子菜單“等......但到目前為止沒(méi)有運(yùn)氣。.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貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
將懸停移動(dòng)到父 div，然后將樣式應(yīng)用到兩個(gè)按鈕。
.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貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
當(dāng)我將其懸停時(shí)，每個(gè)按鈕都有自己的獨(dú)立懸停行為，而不是一起執(zhí)行。
.btn-group leftSideButton:hover{...}從你的 CSS 中刪除。您已經(jīng)為之前聲明的每個(gè)按鈕提供了這種懸停效果。
當(dāng)我駐留在瀏覽器中時(shí)，此按鈕分為不同的行。
添加.btn-group{ display: flex; flex-wrap: nowrap; }到你的 CSS 中。
- 2 回答
- 0 關(guān)注
- 218 瀏覽
添加回答
舉報(bào)
0/150
提交
取消