通过将鼠标悬停在文本链接上触发图像转换

Question

好的，我是一个完整的新手，并且已经从网上的各种资源中找到了我迄今为止所拥有的编码，并对其进行了调整以适应我的需求，所以要温柔：P

基本上，当我将鼠标悬停在图像上时，会发生一个不错的 CSS 过渡。但是，我想在所述图像下方放置一个文本链接，当您将鼠标悬停在文本链接上时，它将触发相同的图像转换。这可能吗？我已经搜索了一段时间的结果，但仍然没有破解这个！

CSS

a.home:link {color:#040404; text-decoration:none; font-weight:bold;   font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
a.home:visited {color:#040404; text-decoration:none; font-weight:bold; font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
a.home:hover {color:#E5712C; text-decoration:none; font-weight:bold; font-family:"Lucida Console", Monaco, monospace; font-size:18px;}
a.home:active {color:#5F5F5F; text-decoration:none; font-weight:bold; font-family:"Lucida Console", Monaco, monospace; font-size:18px;}



#crossfade
{
position: relative;
width: 200px;
height: 200px;
border: solid 2px #5f5f5f;
border-radius: 8px;
box-shadow: 0px 10px 5px #888888;
}

#crossfade img
{
position:absolute;
left:0;
opacity: 1;
-webkit-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-ms-transition: opacity 0.8s ease-in-out;
transition: opacity 0.8s ease-in-out;
}

#crossfade img.top:hover {
opacity:0;
}


HTML

<div id="crossfade">
<img class="bottom" src="http://www.officialdrivingtheory.co.uk/wp-content/uploads/TheoryTest-question.jpg"><a href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"</a>
<img class="top" src="http://www.dandybooksellers.com/acatalog/PracticalTest.jpg"/><a href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg"</a>

</div></br>
<a class ="home" href="http://www.livingthai.org/wp-content/uploads/2011/10/How-to-test-your-Thai-Language-ability.jpg">TESTING</a>

你可以在这里看到我想要做什么：http://jsfiddle.net/WxVE4/1/

由于我的网站尚未发布，因此我暂时只使用了占位符图片和链接。

哦，如果有人能告诉我如何将文本链接很好地对齐并在图像下方居中，那么这就是额外的布朗尼点：D

Answer 1

为了使链接居中对齐，您可以将整个内容包装在一个 div 中，并使 div 样式为

{ display: inline-block; text-align: center; }

如果你可以使用javascipt，那么你可能可以做到你需要的效果，

document.getElementsByClassName('home')[0].onmouseover = function() {
    document.getElementsByClassName('top')[0].style.opacity = 0;
}

document.getElementsByClassName('home')[0].onmouseout = function() {
    document.getElementsByClassName('top')[0].style.opacity = 1;
}

查看http://jsfiddle.net/WxVE4/2/