How to control display and hide with css

CSS is a technology used to control the style of web pages, which allows us to achieve many beautiful effects. When we want to achieve some interactive effects on the page, we can use CSS to control the display and hiding of elements.

In modern website development, we often need to implement some interactive effects to improve user experience. For example, when a user clicks a button, some content on the page will appear or disappear. CSS controlling the display and hiding of elements is one of the key technologies to achieve this type of effect.

Specifically, the display attribute is required to display and hide elements. This attribute can take on the following values:

• block: renders the element as a block-level element, that is, occupying a separate line on the page.
• none: Remove the element completely from the page, that is, it does not occupy any space.
• inline: Renders the element as an inline element, that is, displayed side by side with other elements on the same line.
• inline-block: Present the element as an inline block-level element, that is, displayed side by side with other elements in the same line, but you can set attributes such as width and height.

For example, we want to realize the effect of clicking a button on the page to show or hide a paragraph. This can be achieved through the following code:

HTML code:

<button id="toggle-btn">显示/隐藏段落</button>
<p id="hidden-para">这是一个隐藏的段落</p>

CSS code:

#hidden-para {
  display: none;
}

JavaScript code:

var btn = document.getElementById('toggle-btn');
var para = document.getElementById('hidden-para');
btn.addEventListener('click', function() {
  if (para.style.display === 'none') {
    para.style.display = 'block';
  } else {
    para.style.display = 'none';
  }
});

In the above code, we first Set the display attribute of the paragraph to none, which means that the element is initially hidden. Then use JavaScript code to listen to the click event of the button and determine the value of the display attribute of the current paragraph to achieve the effect of showing or hiding.

In addition to using JavaScript, we can also use CSS’s :hover pseudo-class to achieve the effect of showing/hiding elements when the mouse is hovering. For example, when we need to display a drop-down menu in the page, we can achieve it through the following code:

HTML code:

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
    <a href="#">选项3</a>
  </div>
</div>

CSS code:

.dropdown-content {
  display: none;
}
.dropdown:hover .dropdown-content {
  display: block;
}

In the above code , we first set the content of the drop-down menu to a hidden state. Then use the :hover pseudo-class to listen to the mouse hover event, and set the display attribute value of .dropdown-content to block to achieve the display effect of the drop-down menu.

In general, by using CSS to control the display and hiding of elements, we can make the page more interactive and improve the user experience. In the actual development process, we can combine JavaScript to achieve more complex effects and make the website more beautiful and easier to use.

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