如何为图片onmouseover事件添加显示button_text的额外动作？

Got it! Let's tweak your code to show the button text when hovering over the image. Here are two solid approaches—one using CSS (clean, modern) and one using JavaScript (direct, if you prefer keeping logic tied to the image events):

Approach 1: CSS + Semantic HTML (Recommended) #

This method separates style from behavior, making your code easier to maintain. We'll wrap the image and button text in a container, then use CSS to control when the text is visible.

<?php 
$main_image = get_field('main_image'); 
$hover_image = get_field('hover_image'); 
$button_text = get_field('button_text'); 
?>

<!-- Container to group image and button text -->
<div class="image-hover-wrapper">
  <img 
    src="<?php echo $main_image; ?>" 
    onmouseover="this.src='<?php echo $hover_image; ?>'" 
    onmouseout="this.src='<?php echo $main_image; ?>'" 
    alt="Interactive image"
  />
  <!-- Button text element -->
  <span class="hover-button"><?php echo $button_text; ?></span>
</div>

<style>
/* Position the container to anchor the button text */
.image-hover-wrapper {
  position: relative;
  display: inline-block; /* Match container width to image */
}

/* Hide button text by default */
.hover-button {
  position: absolute;
  bottom: 15px; /* Adjust to place text where you want */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth fade effect */
  pointer-events: none; /* Prevent text from blocking image hover */
}

/* Show text when hovering over the container */
.image-hover-wrapper:hover .hover-button {
  opacity: 1;
}
</style>

Why this works: #

• The container ensures hover events apply to the entire interactive area (not just the image itself)
• CSS transitions add a polished, smooth reveal effect
• You can easily adjust the button's position, color, or padding by tweaking the CSS values

Approach 2: JavaScript-Driven (Direct) #

If you prefer keeping the logic tied directly to the image's onmouseover/onmouseout events, this simpler approach will do the trick:

<?php 
$main_image = get_field('main_image'); 
$hover_image = get_field('hover_image'); 
$button_text = get_field('button_text'); 
?>

<img 
  src="<?php echo $main_image; ?>" 
  onmouseover="this.src='<?php echo $hover_image; ?>'; document.getElementById('hover-btn').style.display='block'" 
  onmouseout="this.src='<?php echo $main_image; ?>'; document.getElementById('hover-btn').style.display='none'" 
  alt="Interactive image"
/>

<!-- Button text element, hidden by default -->
<div id="hover-btn" style="display: none; margin-top: 10px; padding: 8px 16px; background: #2d7ff9; color: white; border-radius: 4px;">
  <?php echo $button_text; ?>
</div>

Quick notes: #

• This is a more "direct" solution but mixes behavior (JS) with presentation (inline styles)
• You can move the inline styles to a CSS class for cleaner code if needed

Either way, both methods will let you show the button text alongside the image hover swap. Tweak the styles to match your site's design!

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