将鼠标悬停在链接上时，从图片中移除灰度
将鼠标悬停在链接上时，从图片中移除灰度
提问于 2019-05-26 22:54:53
编辑:我解决了这个问题，我使整个图像成为一个链接，并将图片上的文本(以前的链接)放入- pointerevents: none。这样我就实现了我想要的东西。
I put image, im hovering over the link that is colored, I want the corresponding picture (top left) to remove grayscale我在页面上有图片，当你将鼠标悬停在它们上面时，它们会从灰度变成正常的彩色图片。默认情况下，它们被视为灰度。
然后我在那个页面上也有链接。我做的是，当我将鼠标悬停在链接1id上时，就像图片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>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-26 22:59:33
如果链接直接位于图片内部：
#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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56314598
复制相关文章
相似问题