When we browse the Web, we often encounter some interaction effects. For example, some changes occur when the container is moved over the mouse. These effects can be implemented in a variety of ways. Now we're going to figure out how to write the script in the CSS to achieve the interactive effect.
The CSS code is as follows:
. Show {
width:600px;
height:58px;
margin:50px Auto 0 auto;
line-height:58px;
border:1px solid #c00;
Background: #f0f0f0;
Text-align:center;
/*webjx.com remind you to focus on viewing the following code * *
Event:expression (
onmouseover = function ()
{
This.style.backgroundcolor= ' #ccc '
This.style.border= ' 1px solid #000 '
},
onmouseout = function ()
{
This.style.backgroundcolor= ' #f0f0f0 '
This.style.border= ' 1px solid #c00 '
}
)
}
HTML code:
<div class= "Show" >webjx.com-Web Teaching Network-provides the latest and fastest web technology </div>
The meaning of this code is to define two different states of the mouse, onmouseover, onmouseout, in two different states, apply different style settings to the element. This achieves the interactive effect we want.
Take a look at the following example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/><title>www.webjx.com display </title><style type=" Text/css "><!--. Show {width : 600px;height:58px;margin:50px Auto 0 auto;line-height:58px;border:1px solid #c00; background: #f0f0f0; Text-align: Center;/*webjx.com remind you to focus on viewing the following code */event:expression (onmouseover = function () {this.style.backgroundcolor= ' #ccc ' This.style.border= ' 1px solid #000 '},onmouseout = function () {this.style.backgroundcolor= ' #f0f0f0 ' this.style.border= ' 1px solid #c00 '})}--></style></pead><body><div class= "Show" >webjx.com-Web Teaching Network- Provide the latest and fastest web technology </div> </body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
