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

好的，我是一个完全的新手，我已经从网上的各种资源中获得了编码，并对其进行了调整以满足我的需要，所以要温柔：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>

CSS
a、 主页：链接{color:#04040404；文本装饰：无；字体大小：粗体；字体系列：“Lucida Console”，摩纳哥，monospace；字体大小：18px；}
a、 主页：访问{颜色：040404；文字装饰：无；字体大小：粗体；字体系列：“Lucida控制台”，摩纳哥，monospace；字体大小：18px；}
a、 主页：hover{color:#E5712C；文本装饰：无；字体大小：粗体；字体系列：“Lucida Console”，摩纳哥，monospace；字体大小：18px；}
a、 主页：活动{颜色：#5F5F；文本装饰：无；字体大小：粗体；字体系列：“Lucida Console”，摩纳哥，monospace；字体大小：18px；}
#交叉衰落
{
位置：相对位置；
宽度：200px；
高度：200px；
边框：实心2px#5f5f；
边界半径：8px；
盒影：0px 10px 5px#8888888；
}
#交叉衰落
{
位置：绝对位置；
左：0；
不透明度：1；
-webkit过渡：不透明度0.8s易入易出；
-moz过渡：不透明度0.8s缓进缓出；
-o型过渡：不透明度0.8s缓进缓出；
-ms转换：不透明度0.8s缓进缓出；
过渡：不透明度0.8s缓进缓出；
}
#crossfade图像顶部：悬停{
不透明度：0；
}
HTML

你可以看到我在这里想做什么：

由于我的网站还没有发布，我现在只使用了占位符图像和链接

---

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

为了将链接对齐中心，您可以将整个内容包装在一个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;
}

---

检查这个

我认为没有JavaScript你是做不到的；这是一个选项吗？是的，如果需要，我可以使用javascript。SilveBlade的回答帮助我使用javascript更接近我的目标：）谢谢SilverBlade！这可能是一种享受，但我注意到，一旦你将鼠标悬停在文本链接上，将鼠标悬停在图像上就不再转换它：（你知道为什么会发生这种情况吗？我也在尝试解决它。