Khi di chuột, tôi có thể làm cho đường viền con của mình chồng lên đường viền gốc như thế nào?

Question

Tôi có một phụ huynh có đường viền màu đỏ. Khi người dùng di chuyển trên trẻ em, tôi đang cố gắng thay đổi đường viền của trẻ em để chồng lên bố mẹ. Làm thế nào tôi có thể đạt được điều này?

.parent{ 
 
    border:1px solid red; 
 
    display:inline-block; 
 
} 
 

 
.parent a { 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
} 
 

 
.parent a:hover{ 
 
    border:1px solid #ddd; 
 
}

<div class="parent"> 
 
     <a href="#">1</a> 
 
     <a href="#">2</a> 
 
     <a href="#">3</a> 
 
     <a href="#">4</a> 
 
     <a href="#">5</a> 
 
    </div>

Answer 1

Vì vậy, miễn là bạn biết chiều rộng của biên giới và có thể sử dụng vị trí tương đối ... Tôi có phóng đại các biên giới ở đây để rõ ràng.

.parent { 
    border:5px solid red; 
    display:inline-block; 
    position: relative; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-bottom:1px solid #ddd; 
    position: relative; 
} 

.parent a:hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
} 

https://jsfiddle.net/kd0gf31z/

Answer 2

.parent a:hover{ 
    border:1px solid #ddd; 
    width:120%; 
} 

https://jsfiddle.net/9Lmwp0e7/

Something như thế này?

Answer 3

tôi đã thực hiện một số thay đổi về phong cách của bạn:

.parent{ 
    display:inline-block; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-right:1px solid red; 
    border-left:1px solid red; 
    border-bottom:1px solid #ddd; 
    border-top: none; 
} 

.parent a:first-of-type{ 
    border-top:1px solid red; 
} 

.parent a:last-of-type{ 
    border-bottom:1px solid red; 
} 

.parent a:hover{ 
    border-color:#ddd; 
} 

xem kết quả ở đây https://jsfiddle.net/IA7medd/343ydvhs/

Answer 4

Tại sao không chỉ cần thay đổi CSS mẹ trên di chuột con?

.parent a:hover .parent { 
//Some CSS 
} 

Answer 5

Bạn có thể đạt được điều này thông qua việc sử dụng các yếu tố giả hoàn toàn vị trí, như vậy:

*,*::before,*::after{box-sizing:border-box;font-family:sans-serif;} 
 
.parent{ 
 
    border:1px solid red; 
 
    display:inline-block; 
 
} 
 
.parent a{ 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
    position:relative; 
 
} 
 
.parent a:last-child{ 
 
    border:0; 
 
} 
 
.parent a:hover::after{ 
 
    border:1px solid #ddd; 
 
    bottom:-1px; 
 
    content:""; 
 
    left:-1px; 
 
    position:absolute; 
 
    right:-1px; 
 
    top:-1px; 
 
}

<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a href="#">4</a> 
 
    <a href="#">5</a> 
 
</div>