When browsing webpages, we often encounter some interactive effects. For example, some changes may occur when the container moves over the mouse. These effects can be achieved in multiple ways. What we need to solve now is how to write scripts in CSS to achieve interaction.
The CSS code is as follows:
The code is as follows: |
Copy code |
. Show { Width: 600px; Height: 58px; Margin: 50px auto 0 auto; Line-height: 58px; Border: 1px solid # c00; Background: # f0f0f0; Text-align: center; /* Pay attention to 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">-Webpage Tutorial network-provides the latest and fastest web page Technology </div>
This code defines two different statuses of the mouse: onmouseover and onmouseout. Different style settings are applied to elements in two different states. This achieves the expected interaction effect.
See the following example:
The code is as follows: |
Copy code |
<! 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"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/> <Title> 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; /* Pay attention to 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> </Head> <Body> <Div class = "show">-Webpage Tutorial network-provides the latest and fastest web page Technology </div> </Body> </Html>
|