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 sytle to

{ 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/

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

1 个答案: