Jeanjean
Ich möchte einen unteren Umrissrahmen erstellen, wenn sich der Mauszeiger über einem Bild befindet, und ich weiß nicht, wie das geht. Ich möchte diese Art von innerer Umrandung verwenden, weil ich keine Layoutprobleme mit einer traditionellen Umrandung haben möchte.
Hier ist mein aktueller Code mit überall Umrissrändern:
.img-lightbox-small {
width: 110px;
height: 110px;
margin: 1px;
}
a img.img-lightbox-small:hover {
opacity: 1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}
Um das Problem zu umgehen, können Sie verwenden border-bottomdamit eingestellt margin-bottom: -1px (die Größe des Randes). Dadurch wird verhindert, dass der Inhalt darunter verschoben wird.
HTML:
<div></div>
test
CSS:
div {
width: 100px;
height: 100px;
background: #eee;
}
div:hover {
width: 100px;
height: 100px;
background: #eee;
border-bottom: 1px solid;
margin-bottom: -1px;
}
Ich bin offen für jede andere Lösung. Was meinst du mit nicht schön?
– Jeanjean
13. Mai 2014 um 8:22 Uhr
Ich habe gerade meine Antwort hinzugefügt
– valerio0999
13. Mai 2014 um 8:22 Uhr
Wie färbt man den Rand? Meine zeigt immer schwarz an
– Joe Phillips
28. Oktober 2017 um 15:47 Uhr
@JoePhillips border-color: red; nur normales CSS.
– Rötlich
29. Oktober 2017 um 16:38 Uhr
outline ist nicht wie das Grenzeigentum. Sie haben alle Seiten oder keine. Sie sollten besser die Border-Eigenschaft gemischt mit verwenden box-sizing:border-box die das Box-Modell überschreibt, so dass sich Ihr Layout nicht “bewegt”.
div {
width: 100px;
height: 100px;
background: #eee;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div:hover {
width: 100px;
height: 100px;
background: #eee;
border-bottom: 1px solid;
}
Ah, ich verstehe, ich habe mich nicht dafür entschieden, da es verwendet wird CSS3.
– Rötlich
13. Mai 2014 um 8:24 Uhr
Ich habe das auch versucht, aber wenn ich es anwende, bewegt sich mein Bild (die Größe wird reduziert, wenn a:hover), was bei dem anderen Code nicht der Fall ist … Siehe jsfiddle.net/8XjM5/4 (Entschuldigung, ich wusste nicht, wie man diese Website benutzt. Ich glaube, ich habe Ihren Code gelöscht Neuling)
– Jeanjean
13. Mai 2014 um 8:29 Uhr
img ist ein Inline-Element, diese Eigenschaft gilt nur für Blockelemente. Wie auch immer, auch wenn es sich um eine CSS3-Funktion handelt, wird sie weitgehend unterstützt: caniuse.com/#search=box-sizing
– valerio0999
13. Mai 2014 um 8:36 Uhr
Der Umriss erlaubt nicht, dass nur eine Seite ihn hat.
– Rötlich
13. Mai 2014 um 8:10 Uhr
Sie könnten so etwas tun DEMO
– Rötlich
13. Mai 2014 um 8:12 Uhr