na `hover` - jak obsługiwać" border-radius "dzieci w różnych scenariuszach?

Question

Mam elementy rodzica z elementami a dzieci. gdy użytkownik mouse over zmieniam kolor obramowania podrzędnego na czerwony. to działa.

Mój problem polega na tym, że długość dziecka nie jest statyczna. jest dynamiczny. Dodaję lewostronne radius zarówno first i last, ale jak dodać right-radius do second i last? (Bo nie wiem liczbę dzieci)

.parent { 
 
    border:5px solid red; 
 
    display:inline-block; 
 
    position: relative; 
 
    border-radius:5px; 
 
    box-sizing:border-box; 
 
    margin-bottom:3em; 
 
} 
 

 
.parent a { 
 
    display:block; 
 
    padding:1em; 
 
    border-bottom:1px solid #ddd; 
 
    position: relative; 
 
    width:50%; 
 
    float:left; 
 
    box-sizing:border-box; 
 
} 
 

 
.parent a:nth-child(odd):hover{ 
 
    border:5px solid #ddd; 
 
    margin: -5px; 
 
} 
 

 
.parent a:nth-child(even):hover{ 
 
    border:5px solid #ddd; 
 
    margin: -5px; 
 
    left:10px; 
 
} 
 

 
.parent a:first-of-type{ 
 
    border-top-left-radius:5px; 
 
} 
 

 
.parent a:last-of-type{ 
 
    border-bottom-left-radius:5px; 
 
}

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

lub co to jest poprawny sposób obsłużyć to?

Answer 1

można użyć następujących i wszystkich przypadkach powinny być klasyfikowane:

.parent { 
    border:5px solid red; 
    display:inline-block; 
    position: relative; 
    border-radius:5px; 
    box-sizing:border-box; 
    margin-bottom:3em; 
} 

.parent a { 
    display:block; 
    padding:1em; 
    border-bottom:1px solid #ddd; 
    position: relative; 
    width:50%; 
    float:left; 
    box-sizing:border-box; 
} 

.parent a:nth-child(odd):hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
} 

.parent a:nth-child(even):hover{ 
    border:5px solid #ddd; 
    margin: -5px; 
    left:10px; 
} 

.parent a:first-of-type{ 
    border-top-left-radius:5px; 
} 

.parent a:nth-child(2) { /* second child */ 
    border-top-right-radius:5px; 
} 

.parent a:last-of-type:nth-child(even){ 
    border-bottom-right-radius:5px; 
} 

.parent a:last-of-type:nth-child(odd){ 
    border-bottom-left-radius:5px; 
} 

.parent a:nth-last-child(2):nth-child(odd) { 
    border-bottom-left-radius: 5px; 
} 

Oto jsfiddle: https://jsfiddle.net/67hr0oax/4

Oto aktualizacja niektóre z zniekształceń usunięte: https://jsfiddle.net/67hr0oax/7/

Uwaga: Obsługa przeglądarki dotyczy tylko IE9 i wyższych.

Answer 2

Kiedy mówisz, że liczba elementów w Twoim wierszu to "dynamic", to nie sądzę, że CSS został zaprojektowany do obsługi tego rodzaju złożoności.

Jeśli zachowasz liczbę elementów statycznych, być może moglibyśmy użyć kombinacji :nth-last-child(), :nth-child(), aby zastosować promień obramowania.

Twoje opcje wydają się być ograniczone do przetwarzania przy użyciu javascript.

Answer 3

Dopóki zachowasz liczbę elementów, nawet dodając <a>&nbsp;</a>, to zadziała.

Chociaż zewnętrzna krawędź ma trochę szczelin, aby się zatrzymać, ale są one tam, aby zatrzymać cały blok skaczący po myszy.

.parent, 
 
.parent a { 
 
    position: relative 
 
} 
 
.parent { 
 
    display: inline-block 
 
} 
 
.parent a { 
 
    display: block; 
 
    padding: 1em; 
 
    width: 50%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border: 5px solid transparent; 
 
    background: #fff 
 
} 
 
.parent a:nth-child(1) { 
 
    border-top-left-radius: 5px; 
 
    border-top: solid red 5px 
 
} 
 
.parent a:nth-child(2) { 
 
    border-top-right-radius: 5px; 
 
    border-top: solid red 5px 
 
} 
 
.parent a:nth-child(even) { 
 
    border-right: solid red 5px 
 
} 
 
.parent a:nth-child(odd) { 
 
    border-left: solid red 5px 
 
} 
 
.parent a:last-child { 
 
    border-bottom-right-radius: 5px; 
 
    border-bottom: solid red 5px 
 
} 
 
.parent a:nth-last-child(2) { 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom: solid red 5px 
 
} 
 
.single a { 
 
    border-radius: 5px; 
 
    border: 5px solid red 
 
} 
 
.parent a:hover { 
 
    border-color: #00f 
 
}

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

 
<div class="parent"> 
 
    <a href="#">1</a> 
 
    <a href="#">2</a> 
 
    <a href="#">3</a> 
 
    <a>&nbsp;</a> 
 
</div> 
 

 
<div class="single parent"> 
 
    <a href="#">1</a> 
 
</div>