Home > Web Front-end > HTML Tutorial > Customize mouse style in web_html/css_WEB-ITnose

Customize mouse style in web_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:03:34
Original
1584 people have browsed it

最近写项目需要实现一个功能:鼠标移动到一个图片左边显示左箭头,移动到右边显示右箭头。
Copy after login

Implementation method: Position two divs on an img. The style of the divs is as follows:

  .toleft        {            width: 200px;            height: 300px;            position: absolute;            left: 0px;            top: 0px;            cursor: url(../images/test/cursor_left.cur), default;        }        .toright        {            width: 200px;            height: 300px;            position: absolute;            left: 200px;            top: 0px;            cursor: url(../images/test/cursor_right.cur), default;        }
Copy after login

Others The browser is fine, but it just doesn't work in IE.

Later I tried several methods:

1. Add z-idnex:1 to img; Add z-index:2 to div //Not working

2. Remove the position:absolute from the div and add float:left; //No way

I had no choice but to add a background-color to the div: #fff; Hey, it actually works.

Finally, set the transparency of the div to 0 and it will be ok.

Related labels:
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