3

我正在尝试创建一种效果，在某些文本上滚动鼠标会导致页面另一部分中的图像更改为另一个图像，直到您的鼠标移离文本。有谁知道一个简单的方法来做到这一点？我更喜欢只使用 CSS，但如果有必要，我会使用 js。

4

2 回答 2

2

在鼠标和各种元素之间获得这种类型的交互不应该单独使用 CSS。您将需要使用 Javascript。以下示例使用jQuery 框架（原始 javascript 的简单插件）在您将鼠标悬停在段落上时更改图像的来源：

$("p.magicParagraph").hover(
  function() { $("img.magicImage").attr("src", "image2.jpg"); },
  function() { $("img.magicImage").attr("src", "image1.jpg"); }
);

此代码将一组事件绑定到任何具有类名“magicParagraph”的段落的悬停。第一个功能是当您移过段落时将执行的操作，第二个功能是当您移出该段落时将执行的操作。这将与以下标记一起使用：

<p class="magicParagraph">Hover over me to change the image!</p>
<p><img src="image1.jpg" class="magicImage" /></p>
于 2009-12-14T16:17:02.053 回答
0

单独使用 CSS 可以实现各种元素之间的交互，但这并不容易。据我所知，它对您的文档结构施加了一些限制（也许比我自己更了解 CSS 选择器的人可以看到解决此问题的方法）。请将此视为概念证明，而不是完整的解决方案。请注意，这需要 CSS Level 2 支持。

<html>
    <head>
        <style>
img { float: right }
p.magicParagraph + img { display: none }
p.magicParagraph:hover + img { display: block }
p.magicParagraph + img + img { display: block }
p.magicParagraph:hover + img + img { display: none }
        </style>
    </head>
    <body>
        <p class="magicParagraph">Hover over me to change the image!</p>
        <img src="image1.png" />
        <img src="image2.png" />
    </body>
</html>
于 2009-12-14T16:52:51.243 回答