html鼠标移动上去后显示图片,鼠标移动到图片名上,显示图片的简单实例

可以使用HTML和CSS的hover属性来实现鼠标移动时显示图片的效果。

HTML代码：

<div>
  <p>鼠标移动上去后显示图片:</p>
  <img src="图片地址" alt="图片" class="pic">
  <p class="picname">图片名</p>
</div>

CSS代码：

.picname {
  display: none;
}

div:hover .picname {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div:hover .pic {
  opacity: 0.5;
}

解释：

首先通过CSS将图片名的display属性设置为none，使其默认不可见。然后，在鼠标移动到div元素上时，通过div:hover .picname选择器将图片名的display属性设置为block，使其可见，并将其定位到图片的中心位置。同时，通过div:hover .pic选择器将图片的opacity属性设置为0.5，使其半透明，以达到鼠标移动到图片上时显示的效果。

注意：这是一个简单的实例，可能需要根据具体情况进行调整。

相关问题

JFreeChart 折线图中，鼠标移动上去显示坐标信息。

要在 JFreeChart 折线图中实现鼠标移动上去显示坐标信息，可以使用 ChartMouseListener 接口和 ChartPanel 类。具体步骤如下：

1. 创建 ChartMouseListener 接口的实现类，重写 chartMouseMoved 方法，在该方法中获取鼠标所在的坐标值，并将其显示在界面上。

2. 创建 ChartPanel 对象，并添加 ChartMouseListener 实现类的实例到 ChartPanel 中。

3. 将 ChartPanel 对象添加到界面中。

下面是一个示例代码，演示如何在 JFreeChart 折线图中实现鼠标移动上去显示坐标信息：

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import javax.swing.JFrame;
import org.jfree.chart.ChartFactory;
import org.jfree.chart.ChartMouseEvent;
import org.jfree.chart.ChartMouseListener;
import org.jfree.chart.ChartPanel;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.plot.XYPlot;
import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer;
import org.jfree.data.xy.XYDataset;
import org.jfree.data.xy.XYSeries;
import org.jfree.data.xy.XYSeriesCollection;

public class LineChartDemo extends JFrame {

    public LineChartDemo(String title) {
        super(title);
        
        // 创建数据集
        XYDataset dataset = createDataset();
        
        // 创建图表
        JFreeChart chart = createChart(dataset);
        
        // 创建 ChartPanel 对象
        ChartPanel chartPanel = new ChartPanel(chart);
        chartPanel.setPreferredSize(new Dimension(500, 300));
        chartPanel.addChartMouseListener(new MyChartMouseListener(chartPanel));
        
        // 添加 ChartPanel 到界面中
        getContentPane().add(chartPanel, BorderLayout.CENTER);
    }

    private XYDataset createDataset() {
        XYSeries series = new XYSeries("Random Data");
        for (int i = 0; i < 100; i++) {
            series.add(i, Math.random() * 100);
        }
        XYSeriesCollection dataset = new XYSeriesCollection();
        dataset.addSeries(series);
        return dataset;
    }

    private JFreeChart createChart(XYDataset dataset) {
        // 创建图表
        JFreeChart chart = ChartFactory.createXYLineChart(
                "Line Chart Demo", // chart title
                "X", // x axis label
                "Y", // y axis label
                dataset, // data
                null, // no legend
                true, // tooltips
                false // no URLs
        );

        // 设置背景颜色
        chart.setBackgroundPaint(Color.white);

        // 获取图表的绘图区域
        XYPlot plot = (XYPlot) chart.getPlot();

        // 设置绘图区域的背景颜色
        plot.setBackgroundPaint(Color.lightGray);

        // 设置绘图区域的网格线颜色
        plot.setDomainGridlinePaint(Color.white);
        plot.setRangeGridlinePaint(Color.white);

        // 设置绘图区域的轴线颜色
        plot.setDomainAxis(new NumberAxis());
        plot.setRangeAxis(new NumberAxis());
        plot.getDomainAxis().setLabelPaint(Color.white);
        plot.getRangeAxis().setLabelPaint(Color.white);

        // 设置绘图区域的线条颜色
        XYLineAndShapeRenderer renderer = new XYLineAndShapeRenderer();
        renderer.setSeriesPaint(0, Color.blue);
        renderer.setSeriesShapesVisible(0, true);
        plot.setRenderer(renderer);

        return chart;
    }

    private class MyChartMouseListener implements ChartMouseListener {
        private ChartPanel chartPanel;

        public MyChartMouseListener(ChartPanel chartPanel) {
            this.chartPanel = chartPanel;
        }

        public void chartMouseClicked(ChartMouseEvent event) {
            // do nothing
        }

        public void chartMouseMoved(ChartMouseEvent event) {
            int x = event.getTrigger().getX();
            int y = event.getTrigger().getY();
            double chartX = chartPanel.getChart().getXYPlot().getDomainAxis().java2DToValue(x, chartPanel.getScreenDataArea());
            double chartY = chartPanel.getChart().getXYPlot().getRangeAxis().java2DToValue(y, chartPanel.getScreenDataArea());
            System.out.println("x=" + chartX + ", y=" + chartY);
        }
    }

    public static void main(String[] args) {
        LineChartDemo demo = new LineChartDemo("Line Chart Demo");
        demo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        demo.pack();
        demo.setVisible(true);
    }
}

这样，在鼠标移动到折线图上时，就会在控制台输出当前鼠标所在的坐标值。你可以根据实际需求，将坐标值显示在界面的合适位置上。

js 实例1 实现购物车鼠标移动显示功能框；

这个功能可以通过以下步骤实现：

1. 给购物车图标绑定鼠标移入事件（`onmouseover`），并在事件处理函数中创建一个显示功能框的 DOM 元素（比如一个 `<div>`），并设置其样式和内容。

   const cartIcon = document.getElementById('cart-icon');
   cartIcon.onmouseover = function() {
     const tooltip = document.createElement('div');
     tooltip.innerHTML = '这是功能框的内容';
     tooltip.style.position = 'absolute';
     tooltip.style.top = cartIcon.offsetTop + cartIcon.offsetHeight + 'px';
     tooltip.style.left = cartIcon.offsetLeft + 'px';
     tooltip.style.border = '1px solid #ccc';
     tooltip.style.padding = '10px';
     document.body.appendChild(tooltip);
   }

2. 给购物车图标绑定鼠标移出事件（`onmouseout`），并在事件处理函数中删除显示功能框的 DOM 元素。

   cartIcon.onmouseout = function() {
     const tooltip = document.querySelector('.tooltip');
     if (tooltip) {
       document.body.removeChild(tooltip);
     }
   }

注意要给功能框设置一个合适的位置，比如在购物车图标下方居中显示。另外，为了避免多次创建功能框导致性能问题，可以在移入事件处理函数中判断功能框是否已经存在，如果存在就不再创建。