我是 html/css 的新手，所以请那些慷慨提供帮助的人记住这一点。
我正在尝试在悬停时进行图像交换，并在图像顶部进行文本链接，该链接在悬停时会改变颜色以适应悬停的图像。我的目标是让图形的整个区域都可以点击和链接。
我设法让它在 Chrome 上运行，但在 Internet Explorer 中惨遭失败。我不希望过渡效果适用于 Internet Explorer。
这是我的代码。我知道这可能非常混乱。 http://studyusa.com/images/-IEHover-Issue.html
我尝试了从不同角度添加填充的解决方案，给它一个高度和宽度，透明背景.gif，以及一些我不知道它是否在做任何事情的 JS 片段......
我取自的 JS 代码：
http://css-tricks.com/snippets/jquery/make-entire-div-clickable/
和这里
http://alistapart.com/article/dropdowns
<!DOCTYPE html>
<head>
<style type="text/css">
/* 3 Features Starts Here */
div#threefeatures-container {
margin: 0 auto;
width: 600px;
height: 120px;
padding: 0px;
border: none;
}
div.threefeatures {
position: relative;
width: 190px;
height: 120px;
float: left;
}
div.threefeatures-margin {
margin: 0 15px;
}
div.threefeatures a.threefeatures-text-link {
position: absolute;
padding-top: 12px;
color: black;
width: 100%;
height: 108px;
font: bold 14px "Helvetica";
z-index: 100;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
display: block;
background-color: rgba(255, 255, 255, 0);
background: url(
http://studyusa.com/common/homepage_test/images/3-Features-Transparent.gif) no-repeat 0px 0px;
}
div.threefeatures a:link span {
display: block;
height: 110px;
}
div.threefeatures a:hover {
color: white;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
div.threefeatures img {
-webkit-transition: all 550ms ease-in-out;
-moz-transition: all 550ms ease-in-out;
-o-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out;
}
div.threefeatures img.img1 {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
/* IE 5-7 */
filter: alpha(opacity=1);
/* Netscape */
-moz-opacity: 1;
/* Safari 1.x */
-khtml-opacity: 1;
/* Good browsers */
opacity: 1;
zoom: 1;
position: absolute; /*collapses images together*/
top:0;
right:0;
width:190px;
}
div.threefeatures:hover img.img1 {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape */
-moz-opacity: 0;
/* Safari 1.x */
-khtml-opacity: 0;
/* Good browsers */
opacity: 0;
zoom: 1;
}
div.threefeatures a img.img2 {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Netscape */
-moz-opacity: 0;
/* Safari 1.x */
-khtml-opacity: 0;
/* Good browsers */
opacity: 0;
zoom: 1;
position: absolute;
top:0;
right:0;
width:190px;
}
div.threefeatures:hover a img.img2 {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
/* IE 5-7 */
filter: alpha(opacity=1);
/* Netscape */
-moz-opacity: 1;
/* Safari 1.x */
-khtml-opacity: 1;
/* Good browsers */
opacity: 1;
zoom: 1;
}
</style>
</head>
<body>
<!--Hover Script for IE-->
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("threefeatures-container");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="DIV") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<!--3 Features Hover Click-->
<script>
$(".threefeatures").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
</script>
<!--3 Features Starts Here-->
<div id="threefeatures-container">
<div class="threefeatures">
<a class="threefeatures-text-link" href="http://studyusa.com/en/schools/"><span>Search Schools</span></a>
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Find-Schools-01.png" class="img1" alt="Use Study in the USA's advanced U.S. Schools Search for International Students to find the perfect school for you">
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Find-Schools-02.png" class="img2" alt="Use Study in the USA's advanced U.S. Schools Search for International Students to find the perfect school for you">
</div>
<div class="threefeatures threefeatures-margin">
<a class="threefeatures-text-link" a href="http://studyusa.com/en/advisors/"><span>Ask Questions</span></a>
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Ask-Questions-01.png" class="img1" alt="Get your questions about Studying in the USA answered by asking our adivisors for free">
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Ask-Questions-02.png" class="img2" alt="Get your questions about Studying in the USA answered by asking our adivisors for free"></a>
</div>
<div class="threefeatures">
<a class="threefeatures-text-link" href="http://studyusa.com/en/resources/"><span>Read Articles</span></a>
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Read-Articles-01.png" class="img1" alt="Read Articles and learn how to Study in the USA">
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Read-Articles-02.png" class="img2" alt="Read Articles and learn how to Study in the USA">
</div>
</div>
</body>
</html>