Mein Rand-Effekt funktioniert nicht korrekt, wenn ich den Mauszeiger schwebe

Ich entwerfe eine einfache Liste mit wenig CSS. Wenn der Benutzer in diesem Design über ein Listenelement schwebt, wird der obere und untere Rand hervorgehoben. Aber außer dem letzten Hover ist nur ein Rahmen markiert. Wenn ich margin-bottom: -1px; entferne, wird 2px angezeigt.Mein Rand-Effekt funktioniert nicht korrekt, wenn ich den Mauszeiger schwebe

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 

 
.list-item { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 1px solid #eeeeef; 
 
    border-bottom: 1px solid #eeeeef; 
 
    margin-bottom: -1px; 
 
} 
 
.list-item:hover { 
 
    color: #0275d8; 
 
    border-top: 1px solid #0275d8; 
 
    border-bottom: 1px solid #0275d8; 
 
    
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

Fiddle

Quelle

2016-11-25 Kiran

Aber zwischen der Faust und der zweiten Li haben Sie auch eine 2px Grenze. Willst du das ? – theoretisch

Ich kann Ihr Problem nicht neu erstellen, wenn Sie 'margin-bottom: -1px;' entfernen. Welchen Browser benutzen Sie? – Roberrrt

@theoretisch: nein. Ich möchte nicht 2px Grenze zeigen. nur 1px zum anzeigen. – Kiran

Dies liegt daran, die .list-item unten noch eine #eeeeef border-top hat. Eine einfache Möglichkeit, dies zu beheben, ist zu sagen, die nächste .list-item sollte einen Rand oben auf geändert haben.

Das können wir tun, wie folgt:

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 
.list-item { 
 
    padding: 10px 0; 
 
    border: solid #eeeeef; 
 
    border-width: 1px 0; 
 
    margin-bottom: -1px; 
 
} 
 
.list-item:hover { 
 
    color: #0275d8; 
 
    border-color: #0275d8; 
 
} 
 

 
/* next .list-item */ 
 
.list-item:hover + .list-item { 
 
    border-top-color: #0275d8; 
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

Hoffnung, das hilft.

Quelle

2016-11-25 10:48:12

Ja es funktioniert so, wie ich will. Vielen Dank! – Kiran

ahh ok gut, ich dachte die Linie zwischen dem ersten und zweiten li sollte auch 1px sein. – theoretisch

@Kiran Ich habe jetzt ein wenig Optimierung für das CSS gemacht. –

Dies soll Ihnen helfen. Es ist keine schöne Lösung, aber es funktioniert, denke ich.

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
} 
 
.list-item { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 1px solid grey; 
 
} 
 
.list-item:hover{ 
 
    color: #0275d8; 
 
    border-color: #0275d8; 
 
} 
 
li:hover + li { 
 
    border-top-color: #0275d8; 
 
} 
 
li:last-child{ 
 
    border-bottom: 1px solid grey; 
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

Quelle

2016-11-25 10:38:51 theoretisch

Seine Arbeit zeigt aber immer noch den grauen unteren Rand, wenn man schwebt. – Kiran

@Kiran Ich reparierte es versuchen es – theoretisch

Ja, aber @ Andrew's ist sauberer. Als dein Li-Stil mein anderes 'li' ausbeutet! – Kiran

-1

diese Klasse Bitte bewerben. ändern die margin bottom:-1px zu 0px

.list { 
 
    list-style-type: none; 
 
    color: #333; 
 
    padding: 0; 
 
    background-color: #fff; 
 
} 
 

 
.list-item { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    border-top: 1px solid #eeeeef; 
 
    border-bottom: 1px solid #eeeeef; 
 
    margin-bottom: 0px; 
 
} 
 
.list-item:hover { 
 
    color: #0275d8; 
 
    border-top: 1px solid #0275d8; 
 
    border-bottom: 1px solid #0275d8; 
 
    
 
}

<ul class='list'> 
 
    <li class='list-item'>Sample List 1</li> 
 
    <li class='list-item'>Sample List 2</li> 
 
    <li class='list-item'>Sample List 3</li> 
 
</ul>

Quelle

2016-11-25 10:41:18

Bitte überprüfen Sie diese –

https://jsfiddle.net/sonymathew/ojky4zhj/ –

Haben Sie überprüft, dass es 2px zeigt Grenze normalerweise? – Kiran

Mein Rand-Effekt funktioniert nicht korrekt, wenn ich den Mauszeiger schwebe

Antwort

Verwandte Themen