Question

编辑：我通过使整个图像成为一个链接以及我放在图片上的文本（以前的链接）解决了这个问题-指针事件：无。这样我就完成了我想要的。

I put image, im hovering over the link that is colored, I want the corresponding picture (top left) to remove grayscale我在页面上有图片，当您将鼠标悬停在它们上时，它们会从灰度图像变为普通彩色图像。默认情况下，它们被视为灰度。

然后，我在该页面上也有链接。我的意思是，当我将鼠标悬停在链接1 id（如图片1）上时，从灰度级更改为正常色。与链接2和图片2相同。

好像鼠标同时在两个位置上一样，悬停在链接和图片上。如何链接它们？

<div class="image">
    <img src="images/martin.jpg" alt="kisat">
        <div class="linkcontainer"><a class="teksti" href="urheilija.html">URHEILIJA</a></div>
</div>

Answer 1

如果链接直接位于图片内部：

#link:hover > #picture { gray-scale: 0; }

如果图片旁边（图片关闭标签后）旁边是链接：

#link:hover + #picture { gray-scale: 0; }

如果链接在图片内：

#link:hover #picture { gray-scale: 0; }

如果链接是图片的兄弟姐妹：

#link:hover ~ #picture { gray-scale: 0; }

解决方案示例：

<div class="image">
  <a href='...'>LINKTEXT</a>
  <img id="img" src="...">
</div>

<style>
  .image { position: relative; }
  .image a {
    position: absolute;
    bottom: 0px;
    left: 0; 
    right: 0; 
    text-align: center;
    z-index: 1;
  }
  a:hover + #img { filter: grayscale(0); }
  #img { filter: grayscale(1); }
</style>

将鼠标悬停在链接上时，可以从图片中去除灰度

1 个答案: