浮动链接悬停答案

【问题标题】：Floating Links Hover浮动链接悬停
【发布时间】：2017-02-25 16:25:44
【问题描述】：

我是 html 的新手，并决定为 Firefox 创建一个起始页。我遇到的问题是，当我将鼠标悬停在链接文本的上方和下方时，我的鼠标光标会变为热链接尖头，就像您将鼠标悬停在链接上时一样。但它在该链接上方和下方的 20+ 像素半径内执行此操作，并且看起来像是一个不可见的字段。它不会在链接文本的左侧和右侧执行此操作。我想修复它，以便它只在我的鼠标直接位于文本上时才会改变，就像所有网站链接一样。我可能缺少一些代码。这是我的完整 html 代码。非常感谢任何帮助。

<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>~name@inferno</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;
}

【问题讨论】：

这段代码只包含CSS定义，你能不能也显示你提到的链接？它是什么元素？ (?)
添加了一个小提琴 - jsfiddle.net/aw09geqh

标签： html

【解决方案1】：

您的问题似乎是 CSS 中的“float:right”。这使得 a 元素占据了盒子的所有空间。

尝试设置行高，以限制 'a' 元素的高度：

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
}

行高更改使得 a 出现在行的顶部。更新 margin-top 修复了这个问题。

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

【讨论】：

如果没有 float:right 文本向左对齐，这不是我想要的，即使使用 text-align: right。
@Lex 更新了使用浮点数的答案
非常感谢您的帮助。对此，我真的非常感激！ ^.

【解决方案2】：

尝试删除此规则：

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

不看HTML很难说，但从你写的来看，可能就是这样。

【讨论】：

不是 td:hover 造成的。
这是由于 .box 上的 50px 行高，但没有快速解决方法 - 你必须稍微重组整个东西......