css - 由文本控制的鼠标悬停横幅

标签 css graphics mouseover onmouseover

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

最佳答案

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

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

此代码将一组事件绑定(bind)到具有类名“magicParagraph”的任何段落的悬停。第一个函数是当您移到段落上方时将执行的操作,第二个函数是当您移出该段落时将执行的操作。这将适用于以下标记:

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

关于css - 由文本控制的鼠标悬停横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1901834/

相关文章:

python - 将鼠标悬停在干图中 matplotlib 中的一个点上时,可能会出现标签吗?

html - css定位下拉子菜单

c# - 如何使用 WinAPI 快速逐像素处理图像?

python - 使用 OpenGL,结果是否取决于安装的硬件或驱动程序?

jquery - 仅为其所属的图像切换 .wp-caption-text

jquery - 当鼠标悬停在其子元素上时,如何防止父元素的 mouseout 触发?

html - 在 css 中使用重复样式的目的是什么?

css - 引导媒体对象问题

html - 响应式样式表根本无法根据屏幕尺寸工作

java - 避免不必要的检查