html - 将鼠标悬停在链接上时从图片中删除灰度

Question

编辑:我通过将整个图像设为链接以及我放置在图片上的文本(以前的链接)来解决这个问题 - pointerevents:无。这样我就完成了我想要的。

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>