如何将图像变换图像与链接变换图像连接

Question

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

与本网站类似：http://www.adrianlawrence.co.nz/

任何帮助都会很棒！

谢谢！

Answer 1

您可以将事件侦听器附加到一个(图像或链接(以侦听鼠标悬停。 让该函数触发一个函数，该函数将找到匹配ID的元素(图像和链接匹配，即图像ID = "image1"，链接id = "link1"(并更改CSS。

Answer 2

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

看看这个小提琴。

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;
}