How to hide labels in css

Method: 1. Use the "opacity:0" statement; 2. Use the "display:none" statement; 3. Use the "visibility:hidden" statement; 4. Use the position attribute with top, bottom, left , right attribute moves the element label out of the visual area.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The first method is to use the Opacity property

This property means to retrieve or set the opacity of the object. When its transparency is 0, visually it It has disappeared, but it still occupies that position and plays a role in the layout of the web page. It will also respond to user interaction. For elements with this attribute added, their background and element content will also change accordingly. We can use this feature to create some great animation effects. I made a simple small effect here, the code is as follows:

Note: This attribute is compatible with browsers IE9 and above. IE8 and earlier versions support alternative filter attributes, for example: filter:Alpha(opacity=50).

The second method is to use the Display attribute

This attribute is the real hidden element. When the display attribute of the element is none, the element will It will disappear from vision, and even the box model will not be generated. It will not occupy any position on the page. Not only that, even its child elements will disappear from the box model together. Any animation effects and interactions added to it and its child elements will have no effect. The show(), hide(), and toggle() methods in jq achieve changing effects by changing the value of display.

The third method is to use the Visibility attribute

This attribute is similar to the opacity attribute. When the attribute value is hidden, the element It will be hidden, occupy its own position, and affect the layout of the web page. The only difference from opacity is that it will not respond to any user interaction. Additionally, elements will be hidden in screen reading software. This property can also be animated as long as its initial and end states are different. This ensures that the transition animation between visibility state switches can be time-smooth

Note:

1. Any version of Internet Explorer (including IE8 ) does not support the "inherit" and "collapse" attribute values.

2. If the visibility of an element is set to hidden, but you want to display its child elements, just add visibility: visible; to the child elements you want to display. Try hovering on the hidden element instead of hovering on the number in the p tag. You will find that your mouse cursor does not turn into a finger. At this time, when you click the mouse, your click event will not be triggered. The

tag inside the

tag can still capture all mouse events. Once your mouse moves over the text, the

itself becomes visible and the event registration takes effect.

The fourth method is to use the Position attribute

The meaning of this attribute is to move the element out of the document flow and out of the visual area. Adding this attribute will not affect the layout. It also allows the element to remain operable. After applying this attribute, you can mainly control the direction (top, left, right, bottom) to reach a certain value and leave the current page.

Note: You should avoid using this method to hide any focusable element, because doing so will result in an unavailable error when the user gives that element focus. Expected focus switch. This method is often used when creating custom checkboxes and radio buttons.

Recommended learning: css video tutorial

The above is the detailed content of How to hide labels in css. For more information, please follow other related articles on the PHP Chinese website!