背景图像出现在链接悬停上

Question

I am trying to have a number of links within a single paragraph that each display a different image on link hover. I want the image to appear behind the text and disappear when mouse moves off link but I have been stuck for a while

I want the images to appear top left on hover

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

Happy to use jQuery or css, any suggestions much appreciated

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

Answer 1

Remove position: absolute; and left: 0; also add background-size: 100% 100%; .

Do in same way to other links

 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>

EDIT

I want the images to appear top left on hover

Set position to img to top left of page

 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>

Set position to img to top left of 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

Less code and much funtionalty

Just add a class to the <a> tags and define the style in css.

There is no need for extra elements and classes for your goal.

This is the result: https://codepen.io/anon/pen/rPNJbe

Answer 3

It can be simple as this: Making the 'span' tag a block element.

span {
  display: inline-block;
}

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

Solution: https://codepen.io/anon/pen/pGoaQz

Answer 4

You can use before tag to insert the image on hover state. This way you not need to change you entire code.

See the comment line // changes here . I changed span:hover to span:hover:before and put content , height and width . After that, to show image in top left and behind the text, I use top , left and z-index . You need to change height and width with the image size.

See working here: 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>