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