Solution to the img tag problem below IE10

Find the problem

I wrote a simple demo before, but later found that it didn't work when used below IE10. Here is a piece of code

HTML:

<div class="all" id="box">
    <img id="image" src="psb.png" width="512" height="1470" >
    <span id="up"></span>
    <span id="down"></span>
</div>

CSS:

.all{ 
    position: relative;
    width: 512px; 
    height: 400px; 
    border: 1px solid #000; 
    margin:100px auto; 
    overflow: hidden;
}
span{
    width: 512px; 
    height: 200px; 
    position: absolute; 
    left: 0; 
    top: 0; 
    cursor: pointer;
}
#down{ 
    top:auto; 
    bottom: 0; 
}

JS:

var ops = document.getElementById('image'),
    oup = document.getElementById('up'),
    odown = document.getElementById('down'),
    obox = document.getElementById('box'),
    timer = null;
    num = 0;

oup.onmouseover = function(){             
    clearInterval(timer);
    timer = setInterval(function(){
        num -= 4;
        if(num < -1070){
            num = -1070;
            clearInterval(timer);
        }
        ops.style.marginTop = num+'px';
    },30)
}

odown.onmouseover = function(){   
    clearInterval(timer);
    timer = setInterval(function(){
        num += 4;
        if(num > 0){
            num = 0;
            clearInterval(timer);
        }
        ops.style.marginTop = num+'px';
    },30)
}

obox.onmouseout = function(){ 
    clearInterval(timer);
}

The effect achieved is that when the mouse moves to the upper span, the image moves upward, when it moves to the lower span, the image moves downward, and stops when it leaves.

However, in versions below IE10, there is no effect when the mouse moves over the span.

After multiple tests, I found two solutions.

Method 1:

After testing, I found that if I add a background color to the span, it will work when I move the mouse over it.

Add code:

 background: #fff;
 opacity: 0;
 filter:alpha(opacity=0);

Add a background color and set it to transparent. Because opacity has compatibility issues, add a filter. The final effect is exactly the same as before.

Method 2:

Later I asked a friend, who said that the img tag will be nested in IE10, so put the img tag outside the div.

<img id="image" src="psb.png" width="512" height="1470" >
<div class="all" id="box">       
    <span id="up"></span>
    <span id="down"></span>
</div>

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.

<<: MySQL-8.0.26 Configuration Graphics Tutorial

>>: Docker case analysis: Building a Redis service