internet-explorer - Image Swap on Hover with Text Link on Top

Question

I am a novice at html/css so please bear that in mind for those who are generous enough to offer help.

I am trying to do a image swap on hover and a text link on top of the image which changes color on hover to accomodate the hovered image. My goal is to get the entire area of the graphic clickable and a link.

I somehow managed to get it to work on Chrome, but fails miserably in Internet Explorer. I don't expect to get the transition effects to work for internet explorer.

This is the code I have. I know it's probably very messy. http://studyusa.com/images/-IEHover-Issue.html

I tried solution from different angles adding padding to , giving it a with height and width, transparent background .gif, and a few JS snippets that I have no idea whether it's doing anything or not...

The JS code I took from:

http:// css-tricks.com/snippets/jquery/make-entire-div-clickable/

and here

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>

score 0 · Accepted Answer

さて、あなたのコードは確かに散らかっていたので、私はあなたのページを再構築してこれを思いついた。新しいコードを調査した後、いくつかのことを理解していただければ幸いです。不明な点がございましたら、お気軽にお問い合わせください。以下のコードは、少なくとも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にリンクを貼り付けてください）

internet-explorer - Image Swap on Hover with Text Link on Top

1 に答える 1

Related

Reference