Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve mouse movement and hover over the picture discoloration or translucency effect". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, the introduction and explanation of CSS5:

See the picture in the web page when the mouse moves over the picture (mouse hover over the picture) the picture turns gray and looks like a discoloration and gray achievement, but the reality is that the picture is set up by CSS to be translucent.

2. Key CSS code: a:hover img {filter:alpha (Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

This CSS code impregnates, sets the equipment to set up the mouse to move to the A hyperlink, the picture (img) in the hyperlink appears semi-clear to indicate 80% efficacy.

Text: filter setup platform IE translucent achievement name, value 1-100. the smaller the value, the more transparent it is. The colorless application opacity before setting IE8 configures IE semi-colorless achievement style, the value is 0.1-1, the smaller the value is, the more transparent it is. Configure IE8 later versions of the clear use-moz-opacity for non-IE browser configuration, such as Firefox, syntax is similar to IE

The CSS names opacity and filter of this configuration are not supported in IE6 because the IE6 version has declined sharply at that time, so IE6's support for this CSS is usually not considered.

Third, the mouse moves to the picture discoloration, the picture is semi-clear example

Example description: configure two DIV boxes, put the two boxes separately into one picture, and observe its effect by configuring the mouse over (: hover) with the image translucency of 80% and 70%.

1. Key CSS code

.div1, .div2 {width:500px; margin:20px auto} .div1 a:hover img {filter:alpha (Opacity=80);-moz-opacity:0.8;opacity: 0.8} .div2 a:hover img {filter:alpha (Opacity=70);-moz-opacity:0.7;opacity: 0.7}

This is configured to set the hover pseudo-class translucency score for the pictures in the hyperlink in the DIV object box.

2. Critical HTML code

When the mouse moves to the picture hover, the picture discoloration filter attainments:

This is the end of the content of "how to move the mouse over the picture and hover over the picture discoloration or translucency effect". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.