我absolutely positioned在左下角有一個按鈕。大小固定為15px width and height。
該按鈕具有:after增加可點擊區域大小的元素。
當您將滑鼠懸停在按鈕上時，按鈕會展開。但這也增加了:after元素的大小。
你如何防止:after元素scaling scale(1.5)與button元素？
我嘗試使用width和height屬性，但這會破壞定位。
body {
position: relative;
height: 100vh;
padding:0;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
button::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
button:hover {
transform: scale(1.5);
transition: transform 0.2s;
}<p>element is left bottom corner</p>
<button></button>uj5u.com熱心網友回復：
反轉應用的樣式 IE 將應用于按鈕的樣式應用到:after元素，反之亦然。因為否則:after當將滑鼠懸停在按鈕上時元素也會展開
button {
position:relative;
border:1px solid #000;
display: block;
padding: 1.5rem 2.5rem;
}
button::after {
content: '';
z-index: -100000;
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 50%);
display: block;
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: red;
z-index: 10000;
}
button:hover:after {
transform: translate(-50%, 50%) scale(1.5);
transition: transform 0.2s;
}<p>element is left bottom corner</p>
<button></button>uj5u.com熱心網友回復：
只需創建第二個按鈕作為偽裝。已經給出了您想要的按鈕，并且給出了負責添加邊框的偽裝按鈕。
兩者具有相同的位置和屬性，只是將z-indexofafBut設定為0使其位于orgBut.
該::after選擇是考慮到afBut，即偽裝的按鈕，這是你原來的按鈕后面。并hover賦予orgBut.
就是這樣。
當您將滑鼠懸停在原始按鈕上方時，游標永遠不會轉到其后面的按鈕，這就是您設定的邊框不受影響的原因。
附上代碼！！
`.orgBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 10000;
}
.afBut {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
color: white;
border: none;
background: #ffd86e;
position: absolute;
bottom: 15px;
left: 15px;
z-index: 0;
}
.afBut::after {
content: '';
/* z-index: -100000; */
position: absolute;
bottom: 50%;
left: 50%;
height: 50px;
width: 50px;
transform: translate(-50%, 50%);
background: transparent;
border: 1px solid black;
}
.orgBut:hover {
transform: scale(1.5);
transition: transform 0.2s;
}`
<p>element is left bottom corner</p>
<button ></button>
<button ></button>
如有任何進一步的問題，請隨意
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/405774.html
標籤：
上一篇：Hadoop解壓縮目錄中的檔案并將每個檔案單獨移動到另一個檔案夾
下一篇：Vue.js中不需要的影片錯誤