css3 show hide

CSS3 is the latest CSS specification. Its emergence makes web design effects more colorful. One of the commonly used functions is to show and hide.

CSS3 has many ways to implement display and hiding, which are introduced below.

1. Use the display attribute

The display attribute can control the display state of the element, including:

• none: hide the element without taking up space on the page .
• block: Display the element as a block element.
• inline: Display the element as an inline element.
• inline-block: Display the element as an inline block element.

By changing the value of the display attribute, elements can be displayed and hidden. For example, the following code displays an image when the mouse hovers over the element:

img {
  display: none;
}

div:hover img {
  display: block;
}

In the above code, the initial display property of the image is set to none, that is, it is hidden. Then through div:hover img, when the mouse hovers over the div element, set the display attribute of the image to block to display it.

2. Use the visibility attribute

The visibility attribute controls the visibility of the element. Unlike the display attribute, setting the visibility attribute to hidden will still occupy space on the page. Its values ​​include:

• visible: The element is visible.
• hidden: The element is not visible, but still takes up page space.

The following code implements the display of text content when the mouse hovers over the element:

div {
  visibility: hidden;
}

div:hover {
  visibility: visible;
}

In the above code, the initial visibility attribute of the div element is set to hidden, that is, hidden stand up. Then through div:hover, when the mouse hovers over the div element, set the element's visibility attribute to visible, which will display it.

3. Use the opacity attribute

The opacity attribute controls the transparency of the element. Its value range is 0 to 1, 0 means completely transparent, and 1 means completely opaque. By changing the opacity attribute value of the element, the element can be shown and hidden. For example, the following code implements the effect of the element fading in and out when the mouse is hovering over the element:

div {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

div:hover {
  opacity: 1;
}

In the above code, the initial opacity attribute of the div element is set to 0, which is completely transparent. Then via div:hover, when the mouse is hovering over the div element, set the element's opacity property to 1, which is fully opaque. At the same time, the transition attribute is added to achieve the fade-in and fade-out effect.

The above are several ways to use CSS3 to display and hide, you can choose according to your needs. It’s worth noting that CSS3 is incompatible with some older versions of browsers, so compatibility issues should be taken into account when writing code.

The above is the detailed content of css3 show hide. For more information, please follow other related articles on the PHP Chinese website!