由文本控制的鼠标悬停横幅答案

【问题标题】：mouseover banner controlled by text由文本控制的鼠标悬停横幅
【发布时间】：2010-12-26 11:42:41
【问题描述】：

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

【问题讨论】：

欢迎来到 StackOverflow - 让我成为第一个为您提出深思熟虑的问题奖励 12 分的人！

【解决方案1】：

在鼠标和各种元素之间获得这种类型的交互不应该仅通过 CSS 来实现。您将需要使用 Javascript。以下示例使用 jQuery Framework（原始 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>

【讨论】：

我想我会同意的！谢谢你。我也会尝试下面的那个，所以谢谢你也回复了 CSS 唯一版本！
@Alex C：欢迎来到这个网站。我同意您可能应该使用标准的 Javascript 解决方案，而不是仅使用 CSS - 但您确实只要求 CSS，所以这就是我给您的。 :-P 请记住在测试后接受答案 - 使用绿色勾号。如果您想看到更多人的答案，可以等待 24 小时后再这样做。

【解决方案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>

【讨论】：