如何将图像翻转与链接翻转联系起来？

Question

如何设置链接/图像，以便在悬停图像时，页面上的链接转为悬停状态，反之亦然？

与此网站的内容类似： http://www.adrianlawrence.co.nz/

任何帮助都会很棒！

谢谢！

Answer 1

您可以将事件侦听器附加到一个（图像或链接）以侦听鼠标悬停。启动一个函数，它将找到匹配ID的元素（图像和链接匹配，即图像id =“image1”，链接id =“link1”）并更改CSS。

Answer 2

纯CSS和HTML绝对可以用于创建类似于您链接到的网站的效果。

查看this fiddle。

1. 将链接文字和图片放在一个a元素中。
2. 为每张图片添加不同的ID。
3. 使用CSS将图像绝对（或相对地，您的通话）放置在所需位置。

HTML：

<a href="www.google.com">
    Hello there.
    <img id="img1" src="[SOURCE]" alt="Be Happy!" />
</a>​

CSS：

/* The Important Stuff */

#img1 {
    position:absolute;
    bottom:20px;
    right:45px;
}

a:hover {
    text-decoration:none;
}

a:hover img {
    opacity:.8;
}

/* The Unimportant Stuff */

body {
    background-color:black;
}

a {
    color:white;
}