如何用CSS实现页面四等分按钮的鼠标悬停背景图切换效果？

Great question! This is a clean UI pattern that’s easy to pull off with CSS Grid for layout and basic background properties for the hover effect. Here’s a step-by-step implementation:

HTML Structure #

Start with a container to hold your four buttons. We’ll use a grid layout to split the page into four equal quarters:

<div class="button-grid">
  <button class="grid-btn btn-1"></button>
  <button class="grid-btn btn-2"></button>
  <button class="grid-btn btn-3"></button>
  <button class="grid-btn btn-4"></button>
</div>

CSS Implementation #

Now let’s style the layout and add the hover image swap:

/* Reset default browser styles to eliminate unexpected gaps */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Make the body fill the entire viewport height */
body {
  height: 100vh;
}

/* Create a 2x2 grid that takes up the full viewport */
.button-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
}

/* Base styles for all buttons */
.grid-btn {
  border: none; /* Remove default button border */
  cursor: pointer; /* Show pointer cursor on hover */
  background-size: cover; /* Scale image to fill button without distortion */
  background-position: center; /* Center the image within the button */
  transition: background-image 0.3s ease; /* Smooth fade between images */
}

/* Define default and hover images for each button */
.btn-1 {
  background-image: url('default-image-1.jpg');
}
.btn-1:hover {
  background-image: url('hover-image-1.jpg');
}

.btn-2 {
  background-image: url('default-image-2.jpg');
}
.btn-2:hover {
  background-image: url('hover-image-2.jpg');
}

.btn-3 {
  background-image: url('default-image-3.jpg');
}
.btn-3:hover {
  background-image: url('hover-image-3.jpg');
}

.btn-4 {
  background-image: url('default-image-4.jpg');
}
.btn-4:hover {
  background-image: url('hover-image-4.jpg');
}

Key Details Explained: #

• CSS Grid Layout: The button-grid uses grid-template-columns and grid-template-rows to split the space into two equal columns and rows, creating four perfect quarters.
• Background Image Handling: background-size: cover ensures your images scale to fit the button’s dimensions without stretching, while background-position: center keeps the image centered.
• Smooth Hover Transition: The transition property adds a 0.3-second fade between the default and hover images, making the effect feel polished instead of abrupt.
• Button Reset: Removing the default border and padding ensures the buttons fill their grid cells completely with no gaps.

Pro Tips: #

• For best results, use default and hover images with similar aspect ratios to prevent shifting during the swap.
• If you want to add text on top of the buttons, set position: relative on the button and use absolutely positioned text inside it.
• To add small gaps between buttons, add a gap: 10px property to the button-grid container.

内容的提问来源于stack exchange，提问作者Barren