About css adding button event (how to write css mouse click event)

ainer\">

We often need to set mouse effects on web pages. Some are automatically generated, such as a link link. Then When the mouse is moved up, it will automatically turn into a hand for clicking. Sometimes when there is an input box, the mouse will automatically turn into an English capital I. So can we set more objects to look like we need? This is completely possible, let’s take a look at the effect

Code writing:

<div onmouseover=\"this.className=\'over\';\"><div onmouseover=\"this.className=\'over\'; this.id=\'over\';\"><div onmouseover=\"this.style.background=\'url(bj.png) no-repeat\';\" onmouseout=\"…;…\">

Other mouse events:

onClick: Mouse click event. (Refers to the mouse Generated when pressed and then released.)

onDblClick: Mouse double-click event. (Refers to generated when the mouse is quickly pressed, released, and pressed again.)

onMouseDown: Mouse Press event. (Occurs when the mouse is pressed.)

onMouseUp: Mouse release event. (Refers to the mouse from the pressed state to popping up.)

onMouseMove: Mouse move event . (Refers to moving the mouse on a specific element.)

onMouseOver: Mouse over event. (Refers to, occurs when the pointer moves from the outside to the element.)

onMouseOut: The mouse leaves Event. (Occurs when the mouse leaves a specific element.)

onLoad: Loading event. (Occurs when the image or page ends loading.)

onUnload: Unloading event . (Generated when the visitor leaves the page.)

onScroll: Scroll bar scroll event. (Generated when the visitor uses the scroll to move up or down.)

Case:

Apply this custom style to the image. When previewed in the browser, the image becomes black and white. We define another style ".over". This style has no content and is an empty style. The style sheet code is as follows:

<style type=\"text/css\">  .over {}.out {filter: Gray}</style>

Then add "onMouseOver="this.className='over\'" onMouseOut="this.className='out\'"" to the image tag (IMG), which means that when the mouse passes by, The picture is in the over style, which is a normal color image; when the mouse leaves, the picture is in the out style, which is a black and white image. oMouseOver and onMouseOut are mouse events, this.className="..." means the class name of the current object is..., pay attention to the size Don’t make mistakes when writing, JS is very sensitive to upper and lower case.

The effect is completed. After saving, open it in the browser. The image will be black and white. When the mouse is moved up, the image will turn into color. , when the mouse leaves, the image turns back to black and white. As long as you use your imagination, you can also create many beautiful mouse effects through this.className method.

Mouse pointer:

<span style=\"cursor:crosshair\">十字</span><span style=\"cursor:text\" >文本光标</span><span style=\"cursor:wait\" >等待</span><span style=\"cursor:default\" >默认</span><span style=\"cursor:help\" >问号</span><span style=\"cursor:e-resize\" >左右箭头</span><span style=\"cursor:s-resize\" >上下箭头</span><span style=\"cursor:auto\" >系统自动给出效果</span><span style=\"cursor:url(\'图标的地址\')\" >系统自动给出效果</span>

CSS definition and usage

:hover selector is used to select the element on which the mouse pointer floats.

Tip: The :hover selector can be used on all elements, not just links.

Tip: The :link selector sets the style of links pointing to pages that have not been visited, the :visited selector is used to set links to pages that have been visited, and the :active selector is used for active links.

Note: In the CSS definition, :hover must be placed after :link and :visited (if present) for the style to take effect.

The above is the detailed content of About css adding button event (how to write css mouse click event). For more information, please follow other related articles on the PHP Chinese website!