Question

idI在页面上有这些链接：

<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>

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

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

在我使用的示例中，单击图像（.all-images）将在div中显示图像。但请记住使用类似图像名称的东西。因为jQuery不会记得点击了哪个图像。您可以使用src的{{1}}之类的内容。

Answer 2

试试这个

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

在文本翱翔的背景图象

2 个答案: