浮動小数点ホバー

私は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

fiddle-jsfiddle.net/aw09geqh – Lex

CSSに「float:right」と表示されていたようです。これは、要素がボックスのすべてのスペースを占めるようにしました。 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の50px線高さに起因しますが、そのための迅速な治療法はありません。全体を少しずつ再構成する必要があります... – Johannes

答えて

関連する問題