2014-10-09 2 views
4

"li a"를 가리키면 일반 CSS의 다른 요소에 영향을 미칠 수 있습니까?CSS가 한 요소를 가리키고 다른 요소에 영향을 미침

왜냐하면 배경 요소로 내 링크를 가리키면 상자 슬라이드를 만들려고하기 때문입니다. 가 정확히이 사이트 네비게이션처럼, 단지 대신 활성화되면, 그것은이

이 가져가

http://www.zindhai.com와 함께 작동하는 것은 내 코드

nav ul li a:hover{ 
    color: #C3E1FF; 
    font-weight: 700; 
} 

nav ul li span:hover{ 
    -webkit-transform:translate(0px, 0px); 
    -webkit-transition:all 0.5s ease-out; 
    transition:all 0.5s ease-out; 
} 

nav ul li span{ 
    height:43px; 
    width:300px; 
    position: absolute; 
    background-color:#47525D; 
    -webkit-transform:translate(300px, 0px); 
    -webkit-transition:all 0.5s ease-out; 
    transition:all 0.5s ease-out; 
    background-position:initial initial; 
    background-repeat:initial initial; 
} 
사전에

감사합니다!

지금 보이는 모습입니다.

http://jsfiddle.net/mbyc3tf9/

+0

이 너무 HTML을 제공하고, http://jsfiddle.net – GramThanos

+0

[만드는의 지침을 참조하십시오 만들 추가 문제의 최소, 완전하고 검증 가능한 예] (http://stackoverflow.com/help/mcve). –

+0

jsfiddle.net 추가 :) 제발 봐주세요 –

답변

3

당신이 범위를 이동해야 할 경우이 (가) 위로 마우스를 둘 때,이

nav ul li a:hover > span {} 
+0

감사합니다. 그것은 작동하지만 지금은 호버 효과가 사라졌습니다. –

+1

당신은 nav_ul li a : hover {}와 nav ul li a : hover> span {}을 추가해야합니다. – Javier

+0

Thanks! 그것은 완벽하게 작동합니다. 사실, 시간이 있다면 다른 질문에 도움이 필요합니다. 어떻게 스팬을 감추고 있는지 알 수 있습니까? 그래서 리를 유인했을 때만 나타납니다. 왜냐하면 지금 오른쪽의 오른쪽에 표시되어 있기 때문입니다 –

0

그래 그것은 할 매우 간단합니다. 귀하의 HTML을 예를 들어 .myElement과 같은 것으로 가정하십시오. 당신이해야 할 일은 ...

nav ul li a:hover .myElement { ... }

그런 다음 { } 내부에 CSS를 입력합니다.

+0

위의 코드를 사용하여 예제를 제공 할 수 있습니까? 작동하지 않는다면 여러 가지 시도를했습니다. –

+0

내 CSS와 비슷한 문제가 있습니다. –

관련 문제