色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 右上角三個點

錢艷冰2年前12瀏覽0評論

CSS中右上角三個點(“…”)通常代表更多選項,類似于下拉菜單中的選項列表。這種效果相對簡單,可以使用偽元素(如“::after”)和一些CSS屬性輕松實現。

/* 創建一個擁有右上角三個點的容器 */
.container {
position: relative;
display: inline-block;
}
/* 添加類名“more”以顯示三個點 */
.container.more::after {
content: "...";
position: absolute;
top: -150%; /* 將三個點定位到容器的右上角 */
right: -50%;
}
/* 當鼠標懸停在容器上時顯現更多選項 */
.container:hover .more-menu {
display: block;
}
/* 創建下拉菜單中的選項列表 */
.more-menu {
display: none;
position: absolute;
right: 0;
background-color: white;
padding: 1rem;
border: 1px solid black;
}
/* 樣式化下拉菜單中的選項 */
.more-menu a {
display: block;
color: black;
text-decoration: none;
padding: 0.5rem;
}
/* 鼠標懸停時高亮選項 */
.more-menu a:hover {
background-color: lightgray;
}

以上代碼中,“::after”偽元素被用于在容器的右上角添加三個點。當鼠標懸停在容器上時,通過更改“.more-menu”類的"display"屬性,下拉菜單中的選項列表可以顯現出來。從這里開始,根據您的需求可以更改下拉菜單的樣式。

在實際開發中,您可能需要將三個點更換為其他圖標或符號。可以更改::after中的“content”屬性來實現這一效果。