Wie man Hover benutzt, benutze border-radius first-child

Question

Ich arbeite an einer kleinen Website und ich habe ein Menü mit dem Border-Radius von 10px. Ich habe ein Problem damit, wie der Hover den Border-Radius nur beim ersten und letzten Kind verwendet. Kann mir jemand erklären, was mache ich falsch?

<div class="menu"> 
     <ul> 
     <li><a href="#">Link 1 </a></li> 
     <li><a href="#">Link 2 </a></li> 
     <li><a href="#">Link 3 </a></li> 
     <li><a href="#">Link 4 </a></li> 
     <li><a href="#">Link 5 </a></li> 
     </ul> 
    </div> 

CSS:

.menu ul 
{ 
    background: #ede0b3; 
    width: 200px; 
    box-shadow: 1px 1px 1px 1px grey; 
    border-radius: 10px; 
    margin-left: 5px; 
} 

.menu ul li 
{ 
    list-style: none; 
    border-bottom: 1px solid grey; 
} 

.menu ul li a 
{ 
    padding: 10px 15px; 
    display: block; 
    color: black; 
    font-weight: bold; 
    text-decoration: none; 
} 

.menu ul li:last-child 
{ 
    border-bottom: none; 

} 

.menu ul li a:hover 
{ 
    background: white; 
} 

.menu li a:first-child:hover 
{ 
    border-radius: 10px; 
} 

Demo: https://jsfiddle.net/vaydrvcr/

Answer 1

Hier ist die aktualisierte Geige. https://jsfiddle.net/vaydrvcr/1/

Sie waren richtig, nur Sie haben vermisst, dass a immer das erste Kind von li ist. Du solltest den Anker des ersten Li anvisieren.

Answer 2

Versuchen Sie dies, Sie müssen Ihr li Element anstelle von a Tag ausrichten.

.menu ul 
 
{ 
 
\t background: #ede0b3; 
 
\t width: 200px; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
\t border-radius: 10px; 
 
\t margin-left: 5px; 
 
} 
 

 
.menu ul li 
 
{ 
 
\t list-style: none; 
 
\t border-bottom: 1px solid grey; 
 
} 
 

 
.menu ul li a 
 
{ 
 
\t padding: 10px 15px; 
 
\t display: block; 
 
\t color: black; 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
} 
 

 
.menu ul li:last-child 
 
{ 
 
\t border-bottom: none; 
 

 
} 
 

 
.menu li:first-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
} 
 

 
.menu li:last-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
}

<div class="menu"> 
 
     <ul> 
 
     <li><a href="#">Link 1 </a></li> 
 
     <li><a href="#">Link 2 </a></li> 
 
     <li><a href="#">Link 3 </a></li> 
 
     <li><a href="#">Link 4 </a></li> 
 
     <li><a href="#">Link 5 </a></li> 
 
     </ul> 
 
    </div>

Answer 3

Verwendung Diese Methode

.menu ul 
 
{ 
 
\t background: #ccc; 
 
\t width: 200px; 
 
\t box-shadow: 1px 1px 1px 1px grey; 
 
\t border-radius: 10px; 
 
\t margin-left: 5px; 
 
} 
 

 
.menu ul li 
 
{ 
 
\t list-style: none; 
 
\t border-bottom: 1px solid grey; 
 
} 
 

 
.menu ul li a 
 
{ 
 
\t padding: 10px 15px; 
 
\t display: block; 
 
\t color: black; 
 
\t font-weight: bold; 
 
\t text-decoration: none; 
 
} 
 

 
.menu ul li:last-child 
 
{ 
 
\t border-bottom: none; 
 

 
} 
 

 
.menu li:first-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
} 
 

 
.menu li:last-child a:hover{ 
 
\t border-radius: 10px; 
 
    background:#fff; 
 
}

<div class="menu"> 
 
     <ul> 
 
     <li><a href="#">Link 1 </a></li> 
 
     <li><a href="#">Link 2 </a></li> 
 
     <li><a href="#">Link 3 </a></li> 
 
     <li><a href="#">Link 4 </a></li> 
 
     <li><a href="#">Link 5 </a></li> 
 
     </ul> 
 
    </div>

Blockquote

Answer 4

Das Problem, dem Sie gegenüberstehen, liegt darin, dass Sie eine border-radius-Eigenschaft für li a: first-child haben, da jedes li-Tag ein einzelnes Element aufweist, weshalb es Ihr gesamtes Element betrifft.

CSS

.menu li:first-child:hover a 
{ 
    border-radius:10px; 
} 

hoffen, dass dies Ihr Problem lösen .. https://jsfiddle.net/xdn80b9f/1/

Answer 5

Hier gehen Sie:

.menu ul { 
 
    background: #ede0b3; 
 
    width: 200px; 
 
    box-shadow: 1px 1px 1px 1px grey; 
 
    border-radius: 10px; 
 
    margin-left: 5px; 
 
    padding-left: 0; 
 
} 
 
.menu ul li { 
 
    list-style: none; 
 
    border-bottom: 1px solid grey; 
 
} 
 
.menu ul li a { 
 
    padding: 10px 15px; 
 
    display: block; 
 
    color: black; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
.menu ul li:last-child { 
 
    border-bottom: none; 
 
    border-top-left-radius: 0; 
 
} 
 
.menu ul li a:hover { 
 
    background: white; 
 
} 
 
.menu li:first-child:hover a { 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
} 
 

 
.menu li:last-child:hover a { 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
}

<div class="menu"> 
 
    <ul> 
 
    <li><a href="#">Link 1 </a> 
 
    </li> 
 
    <li><a href="#">Link 2 </a> 
 
    </li> 
 
    <li><a href="#">Link 3 </a> 
 
    </li> 
 
    <li><a href="#">Link 4 </a> 
 
    </li> 
 
    <li><a href="#">Link 5 </a> 
 
    </li> 
 
    </ul> 
 
</div>

Zuerst habe ich hinzugefügt padding-left: 0; zum .menu ul Selektor und dann ersetzt die letzten Stil .menu li a:first-child:hover mit folgenden nur oben links & oben rechts Grenze zum ersten Menüpunkt und unten links & unteren rechten Rand für letztes Element hinzufügen:

.menu li:first-child:hover a { 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
} 

.menu li:last-child:hover a { 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
}