背景图像出现在链接悬停

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>