Floating Links Hover

Ich bin brandneu auf html und habe beschlossen, eine Startseite für Firefox zu erstellen. Das Problem, das ich habe, ist, dass, wenn ich mouseover über und unter meinem Link-Text mein Mauscursor in die Hotlink-spitze Hand wechselt, wie es normalerweise wäre, wenn Sie über einen Link mouseover. Aber es tut dies innerhalb eines 20+ Pixelradius über und unter dieser Verbindung in einem unsichtbaren Feld, wie es scheint. Dies geschieht nicht links und rechts vom Linktext. Ich möchte es so ändern, dass es sich nur ändert, wenn sich meine Maus direkt über dem Text befindet, wie alle Links auf der Website. Ich vermisse wahrscheinlich etwas Code. Hier ist mein vollständiger HTML-Code. Jede Hilfe wird sehr geschätzt.Floating Links Hover

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="author" content="name"> 
<title>[email protected]</title> 
<link href="favicon.ico" rel="icon"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
<style type="text/css"> 
body { 
    background: url(x.jpg) no-repeat; 
    background-size: cover; 
    background-color: #0A0F14; 
    -moz-appearance: none; 
} 
td { 
    transition: all 2s ease 0.9s; 
    color: inherit; 
    -moz-appearance: none; 
} 
a:link { 
    color: inherit; 
    text-decoration: none; 
} 
a:visited { 
    color: inherit; 
    text-decoration: none; 
} 
a:hover { 
    color: inherit; 
    text-decoration: none; 
} 
a:active { 
    color: inherit; 
    text-decoration: none; 
} 
a { 
    font-family: "Segoe UI"; 
    font-size: 12px; 
    font-weight: bold; 
    outline: none; 
    float: right; 
    margin-right: 15px; 
    margin-top: -3px; 
} 
td:hover{ 
    background: rgba(16, 21, 27, 0); 
} 
.box { 
background: #10151B; 
border-radius: 0px 0px 15px 10px; 
line-height: 50px; 
width: 140px; 
height: 592px; 
position: fixed; 
top: 1px; 
bottom: 0px; 
left: 0px; 
} 
.icon { 
color: #D12248; 
float: left; 
margin-top: 10px; 
text-indent: 5px; 
} 
.icon2 { 
color: #D19011; 
float: left; 
margin-top: 10px; 
text-indent: 5px; 
} 
.icon3 { 
color: #57A3D1; 
float: left; 
margin-top: 10px; 
text-indent: 5px; 
} 
.icon4 { 
color: #AAD130; 
float: left; 
margin-top: 10px; 
text-indent: 5px; 
} 
.icon5 { 
color: #4ED1B3; 
float: left; 
margin-top: 10px; 
text-indent: 5px; 
} 
.icon6 { 
color: #98D1CE; 
float: left; 
margin-top: 10px; 
text-indent: 5px; 
}

Quelle

2017-02-25 Lex

Dieser Code enthält nur die CSS-Definitionen, können Sie auch den von Ihnen erwähnten Link anzeigen? Welches Element ist es? (?) – Shtut

Hinzugefügt eine Geige - jsfiddle.net/aw09geqh – Lex

Scheint wie Ihr Problem war die 'float:right' in der CSS. Das hat dazu geführt, dass das a-Element den ganzen Raum der Box einnimmt.

Versuche eine Zeilenhöhe einstellen, so dass das ‚a‘ Element wird in der Höhe begrenzt:

a { 
    font-family: "Segoe UI"; 
    font-size: 12px; 
    font-weight: bold; 
    outline: none; 
    float: right; 
    margin-right: 15px; 
    margin-top: 10px; //updated the margin top 
    line-height: 15px; //added line height 
}

Die Linienhöhenänderung macht es so, das eine in der Spitze der Zeile erscheint. Die Aktualisierung von Margin-Top behebt das.

https://jsfiddle.net/aw09geqh/1/

Quelle

2017-02-25 16:46:53 Shtut

Ohne float: rechts richtet sich der Text nach links, was nicht das ist, was ich wollte, auch mit text-align: right. – Lex

@Lex Aktualisierte Antwort zu verwenden float – Shtut

Vielen Dank für Ihre Hilfe. Ich schätze das wirklich! ^. < – Lex

Versuchen Sie, diese Regel zu entfernen:

td:hover{ 
    background: rgba(16, 21, 27, 0); 
}

Es ist schwer, die HTML zu sagen, ohne zu sehen, aber von dem, was Sie schreiben, dass es sein könnte.

Quelle

2017-02-25 16:53:00 Johannes

Ich habe eine Geige gemacht: https://jsfiddle.net/aw09geqh/ – Lex

Es ist nicht der td: Hover, der es verursacht. – Lex

es ist wegen der 50px Zeilenhöhe auf .box, aber es gibt keine schnelle Heilung dafür - Sie müssen die ganze Sache ein bisschen umstrukturieren ... – Johannes

Floating Links Hover

Antwort

Verwandte Themen