鼠标悬停时修改指定div透明度并添加悬浮文本标签求助

Hey Kunal, I see the issue here—you're targeting the entire histogram container instead of individual bars when handling hover events. Let's fix that and add the hover text labels you want, step by step.

1. The Root Cause #

Right now, your jQuery code binds mouseover/mouseout to the #histContainer div. That's why every bar fades when you hover anywhere in the container—you're changing the opacity of the parent, not the specific bar under the cursor.

2. Fixing Single Bar Hover Opacity #

Instead of targeting the container, we need to target each individual .myClass bar. We'll use event delegation (which works for dynamically created elements like your bars) to handle hover events on specific bars. Here's the updated jQuery code:

$(document).ready(function() {
  // Use event delegation to handle dynamically added bars
  $("#histContainer").on("mouseover", ".myClass", function() {
    // Store the original opacity of the hovered bar
    $(this).data("originalOpacity", $(this).css("opacity"));
    // Only modify the opacity of the bar being hovered
    $(this).css("opacity", "0.7");
  }).on("mouseout", ".myClass", function() {
    // Restore the original opacity to the hovered bar
    $(this).css("opacity", $(this).data("originalOpacity"));
  });
});

Why This Works: #

• $("#histContainer").on("mouseover", ".myClass", ...) listens for hover events on any .myClass bar inside the container, even if the bars are created after the page loads (like when you click "Draw").
• $(this) refers only to the specific bar under your cursor, so we're only modifying that one bar's opacity, not the whole container.

3. Adding Hover Text Labels #

To show a label with the current bar's value when hovering, we'll:

1. Store the bar's value in a data-value attribute when creating the bar.
2. Create a dynamic label element on hover, position it near the bar, and remove it when hovering out.

First, update your draw() function to add the data attribute and fix a small bug that created an extra empty bar:

function draw() {
  // Clear existing bars first so new draws don't stack
  $("#histContainer").empty();
  
  var nums = document.getElementById("number").value.split(",");
  console.log(nums);
  var w = 40;
  var factor = 20;
  var n_max = Math.max.apply(parseInt, nums);
  var h_max = factor * n_max;

  // Fixed: i <= nums.length was creating an extra empty bar
  for (var i = 0 ; i < nums.length ; i++) {
    var h = factor * nums[i];
    var change = document.getElementById("histContainer");
    var bar = document.createElement("div");
    bar.className = 'myClass';
    
    // Store the bar's original value in a data attribute
    bar.dataset.value = nums[i];
    
    bar.style.position = "absolute";
    bar.style.top = (h_max - h) + "px";
    bar.style.left = i*w + "px";
    bar.style.backgroundColor = "rgba(1,211,97,0.6)";
    bar.style.opacity = "1.0";
    bar.style.width = w + "px";
    bar.style.height = h + "px";
    
    change.appendChild(bar);
  }
}

Then update the jQuery code to add and remove the hover label:

$(document).ready(function() {
  $("#histContainer").on("mouseover", ".myClass", function() {
    $(this).data("originalOpacity", $(this).css("opacity"));
    $(this).css("opacity", "0.7");
    
    // Create and position the hover label
    var label = $("<div class='hover-label'></div>");
    label.text($(this).data("value"));
    label.css({
      position: "absolute",
      top: $(this).position().top - 20, // Position above the bar
      left: $(this).position().left + (w/2) - (label.width()/2), // Center horizontally
      background: "#333",
      color: "#fff",
      padding: "2px 6px",
      borderRadius: "3px",
      fontSize: "12px",
      zIndex: 1000
    });
    $(this).parent().append(label);
  }).on("mouseout", ".myClass", function() {
    $(this).css("opacity", $(this).data("originalOpacity"));
    // Remove the hover label when mouse leaves
    $(this).parent().find(".hover-label").remove();
  });
});

4. Optional CSS for Better Labels #

Add this to your boxes.css to make the labels look cleaner and not interfere with hover events:

.hover-label {
  pointer-events: none; /* Prevent label from blocking hover on the bar */
  white-space: nowrap;
}

That's it! Now when you hover over a single bar, only that bar will fade, and a label showing its value will appear above it.

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