背景圖像出現在鏈接懸停上

Question

我試圖在單個段落中包含多個鏈接，每個鏈接在鏈接懸停時顯示不同的圖像。 我希望圖像出現在文本后面並在鼠標移出鏈接時消失，但我已經卡住了一段時間

我希望圖像在懸停時出現在左上角

https://codepen.io/anon/pen/yZLvXW

很高興使用 jQuery 或 css，非常感謝任何建議

span:hover {
background-image: 
url("https://i.ytimg.com/vi/91v7TX1PcWU/hqdefault.jpg");
position: absolute;
left: 0;
}

Answer 1

移除position: absolute; left: 0; 還添加background-size: 100% 100%; .

以同樣的方式處理其他鏈接

 a { text-decoration: none; color:#000; } a:hover { color: red; } span:hover { background-image: url("https://i.ytimg.com/vi/91v7TX1PcWU/hqdefault.jpg"); background-size: 100% 100%; }

 <h1> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <span class="link1"><a href="#">(1) link#1</a></span> <a href="#">(2) link#2</a> <a href="#">(3) link#3</a> text text text text text text text text text text </h1>

編輯

我希望圖像在懸停時出現在左上角

將position設置為img到頁面左上角

 a { text-decoration: none; color:#000; } a:hover { color: red; } span:hover a{ color:red; } span:hover img { display:block; } img{ width: 50px; position: absolute; top: 0; left: 0; margin-bottom: 15px; display:none; }

 <h1> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <span class="link1"> <a href="#">(1) link#1</a> <img src="https://i.ytimg.com/vi/91v7TX1PcWU/hqdefault.jpg"/> </span> <a href="#">(2) link#2</a> <a href="#">(3) link#3</a> text text text text text text text text text text </h1>

將position設置為img到span左上角

 a { text-decoration: none; color:#000; } a:hover { color: red; } span{ position:relative; } span:hover a{ color:red; } span:hover img { display:block; } img{ width: 20px; position: absolute; top: 0; left: 0; z-index: -1; display:none; }

 <h1> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <span class="link1"> <a href="#">(1) link#1</a> <img src="https://i.ytimg.com/vi/91v7TX1PcWU/hqdefault.jpg"/> </span> <a href="#">(2) link#2</a> <a href="#">(3) link#3</a> text text text text text text text text text text </h1>

Answer 2

更少的代碼和更多的功能

只需在<a>標簽中添加一個class並在 css 中定義樣式。

您的目標不需要額外的元素和類。

這是結果： https : //codepen.io/anon/pen/rPNJbe

Answer 3

它可以很簡單：使“span”標簽成為塊元素。

span {
  display: inline-block;
}

span:hover {
  background-image: url("https://i.ytimg.com/vi/91v7TX1PcWU/hqdefault.jpg"); 
}

解決方案： https : //codepen.io/anon/pen/pGoaQz

Answer 4

您可以使用before標簽在hover狀態插入圖像。 這樣您就不需要更改整個代碼。

請參閱注釋行// changes here 。 我將span:hover更改為span:hover:before並放置content 、 height和width 。 之后，為了在左上角和文本后面顯示圖像，我使用top 、 left和z-index 。 您需要根據圖像大小更改height和width 。

請參閱此處的工作： https : //codepen.io/anon/pen/daymOK

 a { text-decoration: none; color:#000; } a:hover { color: red; } span { } // Changes here span:hover:before { content: ''; background-image: url("https://i.ytimg.com/vi/91v7TX1PcWU/hqdefault.jpg"); position: absolute; left: 0; top: 0; width: 10%; height: 10%; z-index: -1; }

 <h1> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <span class="link1"><a href="#">(1) link#1</a></span> <a href="#">(2) link#2</a> <a href="#">(3) link#3</a> text text text text text text text text text text </h1>