html - 文本悬停时的背景图像

Question

id我在页面上有这些链接：

<div>
     <a href="#" id="eq1">Item 1</a>
     <a href="#" id="eq2">Item 2</a>
     <a href="#" id="eq3">Item 3</a>
</div>

我想使用 css 添加悬停功能，以便当链接悬停在特定于该链接的图像上时，在容器 div 中显示为背景图像。我对 jquery 和 js 还很陌生，但如果可能的话，我更喜欢纯 css 解决方案。

Answer 1

你在你的帖子中有这个问题的答案：悬停CSS 将是这样的：

#eq1:hover {
background-image: url ('../link_to_file.png');
}

jQuery：

你可以在 jQuery 中做到这一点。但是在 jQuery 中这样做是这样的，还有，你有图像吗？我会告诉你如何链接图像。为此使用您的图像。

例子：

$(document).ready(function () {
  $("#eq1").mouseover(function () { // function to run, when mouse comes over eq1
    $("div").css("background", "image_image_link.png");
  }
});

而不是使用div您也可以使用(this).parent，因为您说过，您希望图像显示在父 div 中。您可以为所有三个链接重复代码。

注意：您不能将 CSS 属性添加到 CSS 中的其他一些 div，因为您必须使用 jQuery。

编辑：

您想将图像添加到其他 div 中。那将是这样的：

<div class="all-images">Add all the images here..</div>
<div class="image-viewer"></div>

现在这实际上是这样的： The.all-images是容器，它将包含所有图像，如缩略图。并将.image-viewer用于显示图像。

$(document).ready(function () {
  $(".all-images").click(function () { //
    $(".image-viewer").css("background", "image_image_link.png");
   }
});

在我使用的示例中，单击图像 ( .all-images) 将在 div 中显示图像。但请记住使用图像名称之类的东西。因为 jQuery 不会记住点击了哪个图像。你可以使用类似src的东西img。

Answer 2

尝试这个

div:hover #id1{
   background: white url('path/to/image.png') no-repeat top left;
}