Css 鼠标悬停横幅由文本控制_Css_Graphics_Mouseover_Onmouseover

Css 鼠标悬停横幅由文本控制

css graphics

Css 鼠标悬停横幅由文本控制,css,graphics,mouseover,onmouseover,Css,Graphics,Mouseover,Onmouseover,我正在尝试创建一种效果，在某些文本上滚动鼠标将导致页面另一部分中的图像更改为另一图像，直到鼠标离开文本为止。有人知道一个简单的方法吗？我更喜欢只使用CSS，但如果有必要，我会使用js。在鼠标和各种元素之间进行这种类型的交互不应该只使用CSS。您将需要使用Javascript。下面的示例在您将鼠标悬停在段落上时，使用（仅适用于原始javascript的附加组件）更改图像的源： $("p.magicParagraph").hover( function() { $("img.magicImage

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

在鼠标和各种元素之间进行这种类型的交互不应该只使用CSS。您将需要使用Javascript。下面的示例在您将鼠标悬停在段落上时，使用（仅适用于原始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就可以实现不同元素之间的交互，但这并不容易。据我所知，它对您的文档结构施加了一些限制（也许比我更了解CSS选择器的人可以找到解决方法）。请认为这是一个<强>概念证明<强>而不是一个完整的解决方案。请注意，这需要CSS级别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>


img{float:right}
p、 magicparragraph+img{显示：无}
p、 magicParagraph:hover+img{display:block}
p、 magicParagraph+img+img{display:block}
p、 magicParagraph:hover+img+img{display:none}
将鼠标悬停在我上方以更改图像

欢迎来到StackOverflow-让我第一个为您的深思熟虑的问题奖励12分！我想我会同意的！非常感谢。我也将尝试下面的一个，所以感谢你的家伙谁回应了CSS的唯一版本以及@亚历克斯C：欢迎来到这个网站。我同意您可能应该使用标准Javascript解决方案，而不是仅使用CSS，但您确实只要求使用CSS，所以这就是我给您的：-P记住在测试后接受答案-使用绿色勾号。如果你想从更多的人那里看到答案，那么在这样做之前等待24小时是可以的。