What is causing IE10 to display such a drastically different appearance?

I am currently implementing a cool image fade swap effect using CSS and JQuery along with an image sprite.

JQuery:

<script type="text/javascript>
    $(document).ready(function() {
        $('.otherbutton').append('<img class="hover" />').each(function () {
            var $span = $('> img.hover', this).css('opacity', 0);
            $(this).hover(function () {
                $span.stop().fadeTo(500, 1);
            }, function () {
                $span.stop().fadeTo(500, 0);
            });
        });
    });
</script>

CSS:

<style>
.otherbutton {
    clear: both;
    position:relative;
    display:block;
    height: 28px;
    width: 28px;
    background: #FFFFFF url(images/searchButton.png) no-repeat;
    background-position:0 0;
    cursor: pointer;
}   
.otherbutton img.hover {
    position: absolute;
    display: block;
    height: 28px;
    width: 28px;
    background: #FFFFFF url(images/searchButton.png) no-repeat;
    background-position: bottom;
}
</style>

HTML:

<span class="otherbutton"></span>

When testing in Firefox, the image displays correctly, but in Internet Explorer 8, 9, and 10, the hover image appears as "NOT FOUND". Any suggestions on how to resolve this issue?

jqueryhtmlcss

Answer №1

An elegant solution using only CSS that is compatible with most current web browsers (excluding IE9 and older):

Here is the HTML:

<span>
    <img src="/path/to/hover/image" />
    <img src="/path/to/image" />
</span>

And the corresponding CSS:

span {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
}

span img {
   position: absolute;
   width: 100%;
   height: 100%;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

span img:hover {
    opacity: 0;
}

For a live demo, you can visit the JSFiddle link here:

http://jsfiddle.net/kn9FK/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The slideshow fails to show correctly after being loaded from an external JavaScript file

Utilizing standard code, I have set up a Slideshow at the top of a website: HTML: <body id="Top" onload="showSlides()"> ... <div id="slides"> <div id="slide1" class="slides fade"></div> <div id="s ...

javascriptcss

Finding attributes with spaces in their values using XPath

Is there a way to select an attribute with spaces in xpath? I am currently trying to select a checkbox attribute named "checked type". I have experimented with //[@checked type], //[@checked-type], //[@checked_type], and //[@checked\stype], but none ...

pythonhtmlseleniumxpath

Strong tags within MFC

Is it possible to create labels in MFC (Static text) that contain both bold and non-bold text? For instance, something like this: "I want my label to have a mix of styles like this" Any suggestions on how to achieve this? I am aware that I can change ...

htmlvisual-c++mfclabelbold

Trouble in connecting local CSS stylesheet

I am facing an issue with adding my .css file to my project. Even though I have tried various methods, the styles are not being applied properly. When I directly embed the style code in HTML, it seems to work fine. This leads me to believe that the proble ...

htmlcsshyperlink

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

cssresponsive-designmedia-queries

What is the alternative to jQuery.submit now that it has been deprecated in version 3.3?

After reviewing the source code, you will find: /** * Attach an event handler to the "submit" JavaScript event, or trigger that event on an element. * * @param handler The function to be executed each time the event is triggered. * @see {@link https:/ ...

jquery

Eliminate the navigation bar background using MaterializeCSS

I want to create a unique extended navigation bar for my website that has the following structure: <nav class="nav-extended"> <div class="nav-wrapper"> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a ...

htmlcssmaterialize

Tips for implementing a Jquery .keyup function on elements that are dynamically loaded via Ajax requests

On a specific page, I have elements that are loaded through ajax after user interaction. The issue I'm facing is that Jquery doesn't seem to recognize the newly loaded elements in order to work with the function refresh_current_items. This is m ...

jqueryajax

Looking to clean up unnecessary <b></b> tags from my Wordpress website - how can I do this?

One of my sites is located at . When inspecting the source code through the browser, I noticed the presence of empty tags. Does anyone know why these empty tags are being generated and how they can be removed? I have thoroughly searched through all files ...

javascriptphphtmlcsswordpress

After uploading my website, I noticed that one of the tabs appears in Chinese

After uploading my website, I noticed that one of the tabs (more info) is displaying in Chinese for some unknown reason. I'm not sure why this is happening. Here is the URL: You can also check out the code here: http://pastebin.com/jFBUV1ga ...

htmlcss

Excessive letter spacing in font-face causing display issues on Apple devices such as iPhone and iPad

Recently, I designed a website using some unique fonts that aren't supported on all devices. To ensure compatibility across various platforms, I converted the fonts to all major file formats, including SVG for iPhones and iPads. Surprisingly, this sol ...

iphonehtmlcssipadfont-face

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Troubleshooting a Codeigniter issue with CSRF and jQuery ajax

Having trouble with posting data using ajax? I keep running into an error related to CSRF and despite my efforts, I have not been able to find a solution. Can someone please assist me with this issue? Here is the error message I am consistently receiving: ...

phpjavascriptjqueryajaxcodeigniter

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

javascriptjquerycss

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

Unable to get the code for automatically refreshing a DIV every 5 seconds to function properly

My Inquiry Regarding DIV Refresh I am having issues with the code below that is supposed to automatically refresh the DIV id refreshDiv every 5 seconds, but it is not working as expected. <div id ="refreshDiv" class="span2" style="text-align:left;"&g ...

javascriptajaxjquery

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

javascriptjqueryhtml

Visibility of the br tag is not detected

I need to keep one specific div visible on the page while hiding all other content. However, I am facing an issue where the <br> tag inside that div is not showing up. <div id='min320'>min 320px<br>screen width required</div ...

htmlcss

Does the AJAX load more feature duplicate the existing data?

I've successfully implemented a PHP code that generates JSON data from WordPress posts in the database. By using AJAX, I'm able to load this JSON on my HTML page without any issues. Now, I want to enhance this functionality by adding a "Load Mo ...

javascriptphpjqueryajaxwordpress

Is it possible to create and access a PDF file using file handling in PHP?

In my PHP code, I am utilizing file handling to write and then read a PDF file. However, after successfully creating the PDF file, I encounter an issue where I am unable to open it. When attempting to open the file, Adobe Reader displays an error message s ...

phphtml