Question

我试图在单个段落中包含多个链接，每个链接在链接悬停时显示不同的图像。我希望图像显示在文本后面，并在鼠标移离链接时消失，但是我被卡住了一段时间

我希望图像在悬停时显示在左上方

很高兴使用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>

在{strong> 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

更少的代码和更多的功能

只需在class标签中添加<a>，然后在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>

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

4 个答案: