我是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>
答案 0 :(得分：0)
好的，你的代码确实很乱，所以我重新构建了你的页面并想出了这个。我希望你在调查新代码之后能拿出一些东西。随意询问您是否对某些事情不确定。下面的代码至少应该适用于IE8 +。
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
#three-featured a img { border: none; } /* IE fix */
#three-featured li {
position: relative;
display: inline-block;
text-align: center;
width: 190px;
height: 120px;
margin: 0 5px;
*display: inline; /* IE fix */
zoom: 1; /* IE fix */
}
#three-featured li a {
color: #000;
width: 100%;
height: 100%;
position: absolute;
}
#three-featured li a:hover {
color: #fff;
}
#three-featured li span {
position: relative;
display: inline-block;
margin: 12px 0 0 0;
font: bold 14px "Helvetica";
text-transform: uppercase;
}
#three-featured li img {
position: absolute;
top: 0;
left: 0;
display: none;
}
#schools a {
background: transparent url('http://studyusa.com/common/homepage_test/images/3-Features-Find-Schools-01.png') no-repeat center center;
}
#questions a {
background: transparent url('http://studyusa.com/common/homepage_test/images/3-Features-Ask-Questions-01.png') no-repeat center center;
}
#articles a {
background: transparent url('http://studyusa.com/common/homepage_test/images/3-Features-Read-Articles-01.png') no-repeat center center;
}
</style>
<ul id="three-featured">
<li id="schools">
<a href="http://studyusa.com/en/schools/">
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Find-Schools-02.png" alt="Your alt">
<span>Search Schools</span>
</a>
</li>
<li id="questions">
<a href="http://studyusa.com/en/advisors/" data-bg="http://studyusa.com/common/homepage_test/images/3-Features-Find-Schools-02.png">
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Ask-Questions-02.png" alt="your at" />
<span>Ask Questions</span>
</a>
</li>
<li id="articles">
<a href="http://studyusa.com/en/resources/" data-bg="http://studyusa.com/common/homepage_test/images/3-Features-Find-Schools-02.png">
<img src="http://studyusa.com/common/homepage_test/images/3-Features-Read-Articles-02.png" alt="Your alt" />
<span>Read Articles</span>
</a>
</li>
</ul>
<script type="text/javascript">
jQuery(document).on({
mouseenter: function() {
jQuery("img", this).stop().fadeIn();
},
mouseleave: function() {
jQuery("img", this).stop().fadeOut();
}
},'#three-featured a');
</script>
</body>
</html>
这是一个jsfiddle：http://jsfiddle.net/BDtGG/（当你提出问题时，尽可能经常使用这个网站 - 创建jsfiddle并在stackoverflow上粘贴链接到这里）