Home > Web Front-end > HTML Tutorial > Regarding the issue of replacing the flicker with the hover mouse over the background image_html/css_WEB-ITnose

Regarding the issue of replacing the flicker with the hover mouse over the background image_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:54:49
Original
1974 people have browsed it

The code is as follows:
.mjs_download{height:260px;width:300px;float:left;border:0px solid #ffff00; background:url(../../images/mjs_landun/download.jpg) no -repeat;float:left;margin:20px 0px 0px 0px;cursor:pointer}

.mjs_download:hover {background:url(../../images/mjs_landun/download_light.jpg);cursor: pointer}

will be replaced by another image when the mouse passes over it. But every time the mouse passes over the first time after opening a new web page, the picture will flash once. This should be the reason why IE does not cache new images locally. It is said on the Internet that only IE6 will be like this, and some codes for adding cache are given. However, I am using a high-speed browser, not the old version of IE6, regardless of whether it is added or not. The codes mentioned online are still flashing.

May I ask why? Thank you!


Reply to the discussion (solution)

By the way, I thought of a way. Can you start by loading the two pictures in html and setting them first? The second picture cannot be seen, and then set the second picture to be visible in the hover event~~~This should be OK.

But I still want to ask if there is any way to solve the flickering problem.

Sure enough, I used another div to load the new image at the same location, and then set style="display:none", and the flickering stopped.

You can make two background images into one and position them with background-position, which can also solve the problem

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template