Question

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

Answer 1

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

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

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

<p class="magicParagraph">Hover over me to change the image!</p>
<p><img src="image1.jpg" class="magicImage" /></p>

Answer 2

单独使用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>

鼠标悬停横幅由文本控制

2 个答案: