Using CSS to control the input and hover interaction style

When making a form, there are several ways to achieve the effect of mouse hover interaction:

1, in the XHTML directly written onmouseover, onmouseout script can be implemented, but this violates the Web standards advocated by the content, the principle of separation of performance. It will be cumbersome to modify this in the future. This direct write to XHTML will also increase the page code, if only a input box may be indifferent, if it is dozens of hundreds of, the increase in the number of bytes is very spoiled.

2, in the XHTML add small script, the mouse can switch CSS. Please see this article for specific content. Although the realization of the content, performance phase separation, the future changes will also be very convenient. But it will also add to the page code.

Do we have a better way to implement the effect of the input box input style hover interaction?

We'll talk about this today by writing a small script for the hover interaction effect directly in the CSS file. It not only realizes the separation of content and performance, but also reduces the XHTML code, which facilitates code reuse and optimization.

The principle of this method is mainly to apply the CSS expression.

input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}

The code above declares that when the mouse is moved up, the color of the border is #060, and when the mouse is removed the color of the border is #c00. Let's look at the effect of the operation:

Use CSS to control the input box input to hover interactive style



Name:

age:

gender:

Mobile phone:

address:

You can also do this:

using CSS to control input box inputs hover style



Name:

Age:

Sex:

Mobile:

Address: