호버시 텍스트 상자 내용을 변경하는 방법

어떤 링크가 위에 놓여 있는지에 따라 텍스트 상자 변경 내용을 만들 수있는 방법을 찾는 데 어려움을 겪고 있습니다. 어느 누구도 div에 가장 가깝지만 다른 링크는 영향을 미치지 않는 것으로 작동하도록 할 수 있습니다. 그러나 링크 사이에 텍스트를 삽입하고 싶지 않거나 여러 텍스트 상자를 만들고 싶지 않습니다. 내 주요 목표는 항상 같은 위치에 링크가 있고 그 위에 마우스를 가져 가면 텍스트 상자 아래에 올바른 내용이 표시됩니다. 여기 호버시 텍스트 상자 내용을 변경하는 방법

는 일부 코드와 JSFiddle 내가 더 도움이 내 질문을 설명하기 위해 함께 던졌다 : JSFiddle

HTML :

<a class="one" href="#">one</a> 
<a class="two" href="#">two</a> 
<a class="three" href="#">three</a> 

<div class="element">hello</div>

CSS :

.element { 
    display: none; 
} 

a:hover + .element { 
    display: block; 
}

출처

2014-06-21 G-SCO

중요한 것은 선택자입니다 ('+'). 올바른 선택기를 선택하려면 [CSS 선택자] (http://www.w3.org/TR/CSS2/selector.html#pattern-matching) 설명서를 확인하십시오. –

표시해야하는 "올바른 내용"은 무엇입니까? 이것은 특정 문제입니다. 또한 CSS에서 일반적으로 CSS로 수행 할 수없고 JavaScript에서는 다소 단순한 작업을 시도하는 것처럼 보입니다. –

[this] (http://jsfiddle.net/wCPQj/7/) 또는 무엇을 원하십니까? – potashin

: 다음

<a href="#" class="a-1">one</a> 
<a href="#"class="a-2">two</a> 
<a href="#"class="a-3">three</a> 

<div class="element-1">hello one</div> 
<div class="element-2">hello two</div> 
<div class="element-3">hello three</div>

다음과 같은 CSS 적용

.element-1, .element-2, .element-3{ 
    display: none; 
} 
.a-1:hover ~ .element-1 { 
    display: block; 
} 
.a-2:hover ~ .element-2{ 
    display: block; 
} 
.a-3:hover ~ .element-3 { 
    display: block; 
}

참조 데모 : http://jsfiddle.net/audetwebdesign/p7WUu/

을 CSS는 약간 반복적이지만 작동하며 JavaScript가 필요하지 않습니다.

형제 결합 자 (~)는 형제 요소를 선택하는 데 필요합니다 (참조).

참조 : http://www.w3.org/TR/selectors/#sibling-combinators

출처

2014-06-21 19:13:37

이것은 내가 필요한 것입니다! 빠른 답변 감사합니다!!! –

콘텐츠에 대해 자세히 알아보기 여기에 재산 : http://www.w3schools.com/CSSref/pr_gen_content.asp 내가 그것을 읽으면서, 당신은 호버와 함께 그것을 사용할 수 없다. 또한 현재 htmlelement의 내용 만 조작합니다.

jQuery를 사용하면이 문제를 해결할 수 있습니다. 참조 http://jsfiddle.net/fhD3A/

당신은 follwing을 HTML 마크 업이 필요 $("a").hover(function() { $('.element').html('art'); });

출처

2014-06-21 19:11:49

좀 더 정확하게 말하자면 : http://jsfiddle.net/wCPQj/16/ –

참으로 더 좋았습니다 :-) –

<div class="element special">hello</div> 사용 ~ 대신 +

a:hover ~ .element.special { display: block; }

~ 형제 콤비 그러나, 덜 엄격한입니다, X + Y 유사하다. 인접 선택기 (X + Y)은 이전 선택기 바로 앞에있는 첫 번째 요소 만 선택하지만 ~은 더 일반화됩니다.

출처

2014-06-21 19:14:32 eldos

이 예제에서, 링크 중 어떤 것이 OP가 원하는 것이 아닌 모든 형제'.element' 요소를 열 것입니다. –

@MarcAudet 간단히 말해서 내가 언급 한 것처럼 더 구체적인 선택기를 사용할 수 있습니다. – eldos

호버시 텍스트 상자 내용을 변경하는 방법

답변

관련 문제