mouseover banner 텍스트로 제어 됨

일부 텍스트 위에 마우스를 올리면 마우스가 텍스트에서 멀어 질 때까지 페이지의 다른 부분의 이미지가 다른 이미지로 바뀌는 효과를 만들려고합니다. 누구든지이 작업을 수행하는 간단한 방법을 알고 있습니까? CSS 만 사용하는 편이 좋지만 필요한 경우 js를 사용합니다.mouseover banner 텍스트로 제어 됨

출처

2009-12-14 Alex C

에 오신 것을 환영합니다 - 나를 사려 깊은 질문에 대해 12 점을 보상하는 첫번째하자! – Sampson

CSS 만 사용하여 다양한 요소간에 상호 작용이 가능하지만 쉽지 않습니다. 내가 볼 수있는 한, 문서 구조에 몇 가지 제약이있다. 아마도 CSS 선택기에 대한 지식이 더 많은 사람은이 문제를 해결할 방법을 찾을 수있을 것이다. 전체 솔루션이 아닌 증명 증명으로 간주하십시오. CSS 레벨 2 지원이 필요합니다. 에 StackOverflow에

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

출처

2009-12-14 16:52:51

마우스와 다양한 요소 간의 이러한 유형의 상호 작용을 얻으려면 CSS 만 사용해서는 안됩니다. Javascript를 사용해야합니다. 이 코드는 클래스 이름을 가진 모든 단락의 유혹에 이벤트 세트를 결합

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

: 다음 예제는 단락 위에 마우스를 올려 때 이미지의 소스를 변경하려면 jQuery Framework (원시 자바 스크립트에 단순히 부가 기능)를 사용 "magicParagraph". 첫 번째 기능은 단락을 이동할 때 수행 할 작업이고 두 번째 작업은 단락을 벗어날 때 수행 할 작업입니다. 다음 마크 업과 함께 작동합니다.

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

출처

2009-12-14 16:17:02 Sampson

나는 이것과 함께 갈 것 같아! 고맙습니다. 나는 또한 아래에 하나를 시도 할 것이기 때문에 CSS만의 버전으로 응답 한 사람에게 감사하십시오! –

@Alex C : 사이트에 오신 것을 환영합니다. CSS 대신 표준 Javascript 솔루션을 사용해야한다는 것에 동의합니다.하지만 CSS 만 요구했기 때문에 내가 준 것입니다. :-P 테스트 후 답을 수락하는 것을 잊지 마십시오. 녹색 진드기를 사용하십시오. 더 많은 사람들의 답변을보고 싶다면 24 시간 동안 기다리는 것이 좋습니다. –

mouseover banner 텍스트로 제어 됨

답변

관련 문제