마우스 오버 이미지 및 텍스트 변경

내가 찾고있는 것은 이미지가 바뀌면 텍스트가 바뀌고 변경됩니다. 모든 솔루션이 저에게 도움이되지 않는 동안 사이트를 검색했습니다.마우스 오버 이미지 및 텍스트 변경

여기 내 코드가 있습니다.

 <div class="four columns full-height"> 
     <div class="projects"><a href="#">Collectif Neuf</a></div> 
     <a href="#"><img class="vertical" src="images/projects/c9.jpg"></a> 
     </div>

나는이 시도했습니다 : CSS image hover change color of text

IMG 내 .projects의 사업부를 초과하는 경우에만 작동합니다. 그러나 .projects div가 제대로 표시 되려면 img에 있어야합니다.

고맙습니다.

편집

난 그냥 내가 무엇을 찾고 잘 설명하지 않았 음을 실현했습니다. 텍스트 변경에 의해 이미지가 떠오르게 될 때 링크에 밑줄이 표시됨을 의미합니다. 마우스를 가져 가면 링크에 밑줄 만 표시됩니다.

정말 유감입니다. JQuery와없이

출처

2012-07-30 user1563899

<script> 
function domover(el) { 
    el.parentNode.parentNode.firstChild.firstChild.style. = 'Hi!'; 
el.parentNode.parentNode.firstChild.firstChild.style.textDecoration = 'underline'; 
} 

function domout(el) { 
    el.parentNode.parentNode.firstChild.firstChild.innerHTML = 'Bye'; 
el.parentNode.parentNode.firstChild.firstChild.style.textDecoration = 'none'; 
} 
</script> 


<div class="four columns full-height"><div class="projects"><a href="#" style="text-decoration:none">Hi</a></div> 
    <a href="#"><img class="vertical" src="http://i.imgur.com/l5WLB.jpg" onmouseover="domover(this)" onmouseout="domout(this)"></a> 
</div>

테스트 :이 작업을 위해, 첫 번째 요소 사이에 공백 (도 줄 바꿈)이 없어야합니다, http://pastehtml.com/view/c6kbpxrzp.html

알 수 있습니다.

출처

2012-07-30 19:37:19 leonbloy

도움을 주셔서 감사합니다. 슬프게도 나는 내가 무엇을 찾고 있는지 잘 설명하지 못했습니다. 내 말은 이미지가 떠오르게 될 때 텍스트에 밑줄이 생기는 것입니다. – user1563899

밑줄 – leonbloy

으로 수정하면 텍스트를 변경하지 않고도이 작업을 수행 할 수 있습니다. 원래 텍스트 그대로. 또한 밑줄은 이렇게 복잡 할 수 있습니다 :'color : # 000; 배경 : URL (../ images/underlineh1.gif) repeat-x 100 % 100 %; 패딩 하단 : 5px; outline : 0;' – user1563899

마우스 오버 이미지 및 텍스트 변경

답변

관련 문제