為元素新增邊框,有多少種好方法

2021-07-08 19:02:18 字數 1375 閱讀 2915

相信大家在做專案的過程中會經常遇到這樣的乙個需求,滑鼠hover到某個元素的時候為這個元素新增邊框,這個簡單的需求僅需注意新增邊框後不會對原有的位置造成布局的影響從而造成布局跳動。本文將會試圖**完成這個簡單需求的方法。

實現思路:為元素中預先設定邊框,邊框的顏色與元素所在父元素背景色一致,邊框大小與hover時候的邊框大小一致,滑鼠hover過元素的時候只需要設定邊框顏色便可。

相容問題:無

實現**:

html結構

class

="parent">

li>

li>

ul>

css
.parent

.parent li

.parent li:hover

實現思路:首先設定元素為position:relative,然後新增額外隱藏的邊框元素,滑鼠hover過元素的時候顯示提前隱藏的邊框元素

相容問題:無

實現**:

html結構

class

="parent">

class="bd">

div>

li>

class="bd">

div>

li>

ul>

css.parent

.parent li

.parent li .bd

.parent li:hover .bd

實現思路:當hover過元素的時候,利用設定屬性box-sizing設定容器為怪異模式,即設定盒模型為 容器width = border + padding + 內width

相容問題:

實現**:

html結構

class

="parent">

li>

li>

ul>

css
.parent

.parent li

.parent li:hover

實現思路:當hover過元素的時候,利用h5的新屬性box-shadow為元素新增實體的陰影作為邊框

相容性:

html結構

class

="parent">

li>

li>

ul>

css
.parent

.parent li

.parent li:hover

為元素新增邊框,你有多少種好辦法?

相信大家在做專案的過程中會經常遇到這樣的乙個需求,滑鼠hover到某個元素的時候為這個元素新增邊框,這個簡單的需求僅需注意新增邊框後不會對原有的位置造成布局的影響從而造成布局跳動。本文將會試圖 完成這個簡單需求的方法。實現思路 為元素中預先設定邊框,邊框的顏色與元素所在父元素背景色一致,邊框大小與h...

JQUERY為元素新增樣式的實現方法

由於jquery支援css3,所有能很好的相容很多瀏覽器,所以通過jquery來使用css樣式比較好 為定義好的css樣式可以呼叫元素的css方法新增樣式 span css css屬性名 屬性值 如 span css color red 將標籤為span的字型都設為紅色的 id span 如果是定義...

python List新增元素的4種方法

list1 a b c list1 a b c extend 將乙個列表中每個元素分別新增到另乙個列表中,只接受乙個引數 extend 相當於是將list b 連線到list a上。list1 a b c list1.extend d list1 a b c d insert i,val 將乙個元素...