浮動鏈接懸停

我是全新的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>[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; 
}

來源

2017-02-25 Lex

此代碼僅包含CSS定義，您是否也可以顯示您提到的鏈接？它是什麼元素？（？） – Shtut

增加了一個小提琴 - jsfiddle.net/aw09geqh – Lex

看起來像你的問題是'float:right'在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 
}

行高改變使得它如此的一個出現在該行的頂部。更新頁邊距修補程序。

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

來源

2017-02-25 16:46:53 Shtut

沒有浮動：右側的文本對齊到左邊，這不是我想要的東西，甚至文本對齊：右。 – Lex

@Lex更新回答使用float – Shtut

非常感謝您的幫助。對此，我真的非常感激！^< – Lex

嘗試刪除這條規則：

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

很難沒有看到HTML說，但是從你寫的東西，這可能是它。

來源

2017-02-25 16:53:00 Johannes

我做了一個小提琴：https://jsfiddle.net/aw09geqh/ – Lex

這不是TD：徘徊是造成它。 – Lex

這是由於對.box的50像素的行高，但沒有迅捷治癒 - 你將不得不重組整個事情有點... – Johannes

浮動鏈接懸停

回答

相關問題