Html 浮动链接悬停_Html - Fatal编程技术网

Html 浮动链接悬停

html

Html 浮动链接悬停,html,Html,我是html新手，决定为Firefox创建一个起始页。我遇到的问题是，当我将鼠标移到链接文本的上方和下方时，鼠标的光标会变为“热链接”的尖头指针，这与通常将鼠标移到链接上时的情况相同。但它是在一个20多像素半径的范围内，在一个看不见的区域中，链接的上下。它不会在链接文本的左侧和右侧执行此操作。我想修复它，使它只改变时，我的鼠标直接在文本，因为所有的网站链接做。我可能丢失了一些代码。这是我的完整html代码。非常感谢您的帮助 <html xmlns="http://www.w3.org/19

我是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;
}


~name@inferno
身体{
背景：url（x.jpg）不重复；
背景尺寸：封面；
背景色：#0A0F14；
-moz外观：无；
}
运输署{
过渡：所有2秒缓解0.9秒；
颜色：继承；
-moz外观：无；
}
a:链接{
颜色：继承；
文字装饰：无；
}
a:参观了{
颜色：继承；
文字装饰：无；
}
a:悬停{
颜色：继承；
文字装饰：无；
}
a:主动的{
颜色：继承；
文字装饰：无；
}
a{
字体系列：“SegoeUI”；
字体大小：12px；
字体大小：粗体；
大纲：无；
浮动：对；
右边距：15px；
利润上限：-3px；
}
td:悬停{
背景：rgba（16,21,27,0）；
}
.盒子{
背景：#10151B；
边界半径：0px 0px 15px 10px；
线高：50px；
宽度：140px；
高度：592px；
位置：固定；
顶部：1px；
底部：0px；
左：0px；
}
.图标{
颜色：#D12248；
浮动：左；
边缘顶部：10px；
文本缩进：5px；
}
.icon2{
颜色：#D19011；
浮动：左；
边缘顶部：10px；
文本缩进：5px；
}
.icon3{
颜色：#57A3D1；
浮动：左；
边缘顶部：10px；
文本缩进：5px；
}
.icon4{
颜色：#AAD130；
浮动：左；
边缘顶部：10px；
文本缩进：5px；
}
.icon5{
颜色：4ED1B3；
浮动：左；
边缘顶部：10px；
文本缩进：5px；
}
.icon6{
颜色：#98D1CE；
浮动：左；
边缘顶部：10px；
文本缩进：5px；
}

您的问题似乎是CSS中的“

浮动：右”

”。这使得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显示在行的顶部。更新margintop修复了这一问题

尝试删除此规则：

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

很难说没有看到HTML，但从您编写的内容来看，可能就是这样。

这段代码只包含CSS定义，您还可以显示您提到的链接吗？它是什么元素？（？）。我真的很感激。这不是td:hover造成的。这是由于.box上的50px线高度造成的，但没有快速解决方法-你必须重新调整整个事情一点。。。