文章/答案/技术大牛

发布

问浮动链接Hover
EN

Stack Overflow用户

提问于 2017-02-25 16:25:44

回答 2查看 334关注 0票数 0

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

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-02-25 16:46:53

看起来你的问题是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出现在行的顶部。更新边距顶修正了这一点。

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

票数 0

Stack Overflow用户

发布于 2017-02-25 16:53:00

尝试删除此规则：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42458545

复制

相似问题

问浮动链接Hover
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动链接HoverEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动链接Hover
EN