All geek questions in one place

Text controlled pen

I am trying to create an effect where dragging the mouse over some text will cause the image in another part of the page to change to another image until the mouse moves away from the text. Does anyone know an easy way to do this? I would prefer to use only CSS, but will use js if necessary.

+3
source share
2 answers

You can get the interaction between the various elements using only CSS, but it is not easy. As far as I can see, this creates some limitations for your document structure (maybe someone who has more knowledge about CSS selectors than I can see how this happens). Please consider this a proof of concept , not a complete solution. Please note that this requires CSS level 2 support.

<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>
0
source

CSS. Javascript. jQuery Framework ( javascript), :

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

, Name "magicParagraph". - , , , - , , . :

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

Source: https://habr.com/ru/post/1725630/

More articles:


All Articles