鼠标悬停显示图片 js

鼠标悬停显示图片是一种常见的网页效果，可以通过JavaScript实现。一般的做法是，在HTML中通过<img>标签定义图片，然后使用JavaScript获取到该图片元素，并添加一个事件监听器，当鼠标悬停在该图片上时，显示一个包含该图片的元素（例如一个<div>）。

以下是一个简单的示例代码：

HTML:

<img src="image.jpg" id="img1">
<div id="img-container"></div>

JavaScript:

var img = document.getElementById("img1");
var container = document.getElementById("img-container");

img.addEventListener("mouseover", function() {
  container.style.backgroundImage = "url('image.jpg')";
  container.style.display = "block";
});

img.addEventListener("mouseout", function() {
  container.style.display = "none";
});

上述代码中，当鼠标悬停在id为"img1"的图片上时，会将包含该图片的<div>元素的背景图设置为该图片，并显示该元素；当鼠标移出图片时，隐藏该元素。

相关问题

js 鼠标悬停显示文字

您可以使用 HTML 的 title 属性来实现鼠标悬停显示文字。在需要显示文字的 HTML 元素上添加 title 属性，并将要显示的文字作为属性值即可。

例如，在一个链接中添加 title 属性：

<a href="https://www.example.com" title="这是一个示例链接">示例链接</a>

当鼠标悬停在链接上时，会出现一个提示框，显示 "这是一个示例链接" 文字。您也可以在其他 HTML 元素上使用 title 属性来实现类似的效果。

js鼠标悬停显示文字

您可以使用HTML中的title属性来在鼠标悬停时显示文本。例如，如果您想在鼠标悬停时在一个链接上显示文本，可以像下面这样编写代码：

<a href="#" title="这是一个链接">链接</a>

当鼠标悬停在链接上时，将显示"这是一个链接"。同样，您也可以将title属性添加到其他HTML元素中，例如图像和表单元素。如果您想在JavaScript中动态更改title属性的值，可以使用以下代码：

document.getElementById("elementId").title = "新的文本";

其中，"elementId"是要更改title属性的元素的ID，"新的文本"是您想要显示的新文本。