html - 如何将图像翻转与链接翻转连接起来？

Question

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

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

任何帮助都会很棒！

谢谢！

Answer 1

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

Answer 2

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