在懸停時僅添加底部邊框，僅限CSS

我可以在懸停時顯示內部邊框，但我只想顯示邊框底部。

這裏是我到目前爲止，即使是與大綱屬性，而不是邊界：

#links a img, #links a{ border: none; float: left; } 
#links a{ margin: 3px; } 
#links a:hover{ outline: 3px solid black; }

不徘徊：

enter image description here

徘徊：

enter image description here

來源

2013-03-04 Chaddly

你的意思'#links：懸停{邊框底部：3px的純黑色; ''？ – Sarfraz 2013-03-04 18:46:24

剛分配上:hover的border-bottom屬性：

#links a:hover{ 
    border-bottom: 3px solid #00f; /* or whatever colour you'd prefer */ 
    outline: 3px solid black; 
}

如果短語「掛靠圖像」應該被理解爲對img是內的a元素，那麼我建議：

#links a:hover img { 
    border-bottom: 3px solid #00f; /* or whatever you'd prefer */ 
}

來源

2013-03-04 18:45:57

我需要這個在IMG上工作。此方法在基本錨標記上正常工作，但我有一個錨定圖像。還有什麼想法？ – Chaddly 2013-03-04 18:57:16

也許，但我不知道你的HTML是什麼。你的'img' *在'a'內（並且沒有，「錨定圖像」沒有說或解釋這一點）？ – 2013-03-04 19:05:57

獲得相同結果而不影響鏈接大小（邊框附加到元素外部）的一種方法是使用內嵌框陰影。

哪個在你的例子將改變你的a:hover以下幾點：

#links a:hover { 
    box-shadow: inset 0 -10px 0 0 cyan; 
}

你可以在這裏看到小提琴：https://jsfiddle.net/kLLxkdw4/

來源

2016-05-07 21:13:38 Gemtastic

試試這個代碼，我只是寫專門爲你。此解決方案回答您在:hover上添加border-bottom的問題。它甚至遠遠超過了這一點，並改變了整個#link元素的background:hover以及CSS transitions。

A DEMO ON CODEPEN

HTML標記

<div id="links"> 
    <a href="#">Example Link</a> 
</div>

CSS Effets &過渡

#links a{ 
    color:#fafafa; 
    text-decoration:none; 
    background-color:#8b0000; 
    padding:15px; 
    border-radius:5px; 
    font-size:1.3em; 
    transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
    -moz-transition: all 0.3s ease-in-out; 

} 
#links a:hover{ 
    background-color:#fff; 
    color:#002f5b; 
    border-bottom:5px solid #002f5b; 
}

來源

2016-05-08 04:47:06 AllJs

試試這個
＃鏈接a：懸停{border-bottom：inset 8px＃000; }

來源

2016-11-29 12:12:03

把你的圖像放在一個div中，並添加一個蒙版div。

#mask { 
 
    position: absolute; 
 
    z-index: 2; 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    border-bottom: 3px solid transparent; 
 
} 
 
#mask:hover { 
 
    border-bottom: 3px solid cyan; 
 
} 
 
#outerDiv { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
img { 
 
    display: block; 
 
}

<div id='outerDiv'> 
 
    <img src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=32&d=identicon&r=PG" /> 
 
    <div id='mask'></div> 
 
</div>

來源

2016-11-29 12:52:59

如果你想讓它與img工作中的a裏面，你可以在錨使用pseudo - 元素，然後將邊框應用到這一點。也。爲了避免追加到鏈接的外邊框，你應該使用插圖代替box-shadow：

a { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
a:hover:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    box-shadow: inset 0 -20px 0 #11c0e5; 
 
} 
 

 
a img { 
 
    display: block; 
 
}

<a href="#"> 
 
    <img src="http://oi65.tinypic.com/241jlzk.jpg"/> 
 
</a>

來源

2017-01-20 17:59:09 TheYaXxE

在懸停時僅添加底部邊框，僅限CSS

回答

相關問題