Making the mouse moved events

  1. 先来写html代码
    

Here Insert Picture Description
Open Dreamweaver, a new html, css, js document each one of them saved in the same folder, and then import the file into html css and js document below to start writing style
to create a new div, remember not to wrap the js the reference code, but the label must be wrapped living body, as shown in
the reference css is not live doby package label, but the label must be wrapped head, which is a conventional writing,
to a new div class name "header" write a button label "button, and write 'Please move your mouse' button at the bottom of the tab, the button label" in the "header" in the header "inside the class to write a div, class called" hello ", to it is a class with the same name ID, in it to give it a button label, is empty.
HTML style finished, to see the effect.
Here Insert Picture Description
browser to open the source file using the upper left corner is divided into two 'Please move your mouse' and 'out of your mouse' button
2.
Let's write css style of
Here Insert Picture Description
the following two cases of this material is
Here Insert Picture DescriptionHere Insert Picture Description
put inside and outside the browser margins set to 0, to the "header" width: 100% as high as 697 Element value, and then to the sub-header in the style set element ·, 77 pixels wide, 22 pixels high, introducing blue images, hidden frame, adjusts the position of the button from the outside through the upper side and the left side, and give it a relative positioning, Next, write 'hello' in the style of the buttons, 77 pixels wide, 22 pixels high, red imported images, hidden frame, to adjust the position of the button from the outside through the upper side and the left side, and give it an absolute positioning, provided to top 0, so that the red image and blue image superimposed (absolute positioning according to positioning and relative positioning by adjusting the position of four values are: Top, right, bottom,
left corresponds to the upper right, lower, left); the picture style red hide; to see the effect
Here Insert Picture Description
only a blue button, because we put the red button hidden

Finally, to write js style
Here Insert Picture Description
to write a page load event, then get two ID given in html,

Then write it to each ID with the mouse into the mouse out events Note: The code to write the best page load event, or it may be wrong to take a look at the effect
Here Insert Picture Description
when the mouse button is moved, the color turns red, text will change, and then out of the turns blue, the text has changed back to the original text

Guess you like

Origin blog.csdn.net/weixin_44540360/article/details/89372196
Recommended