2016-10-24 2 views
-4

나는 이미 여기를 둘러 보았고 나의 질문에 답하는 것이나 실제로 작동하는 것을 찾을 수 없으므로 아마도 여러분 중 일부가이 문제에 대한 해결책을 줄 수 있습니다.호버상에서 대체 링크의 색깔은?

저는 블로그 템플릿을 만들고 있는데, 게시물의 링크가 두 개의 다른 색상을 가리켜 번갈아 표시하고 싶습니다. 링크 1은 빨간색으로, 링크 2는 녹색으로, 링크 3은 빨간색으로, 링크 4는 녹색으로 이동합니다.

어떻게해야합니까?

편집 : 누군가 내가 언급 한 부분을 제거했습니다. 이미 이것에 대해 조사 했었지만, 왜 그렇게했는지는 알 수 없습니다.

여기가 작동하지 않는 또 다른 질문,에있는 코드는 다음과 같습니다 또한

body:nth-child(odd) a:hover{ background-color:#dedede; color: #996633; } 
body:nth-child(even) a:hover{ background-color:none; color : #FF0000} 

, 내 질문은 당신의 일부를 짜증 경우 내가 죄송합니다. 그건 내 의도가 아니야. 그래도 무례 할 필요는 없었습니다. , 각 링크를 선택하고 다른 색을 지정하는 n 번째의 아이를 사용할 수,

+0

지금까지 시도한 것을 알 수 있도록 일종의 코드를 제공해주십시오. 우리는 당신을 위해 코드를 작성하는 대신 여기까지 작성한 것을 수정하는 데 도움이됩니다. –

+0

최소한이 코드는 직접 작성해야합니다. 스택 오버플로는 코드 작성 서비스가 아닙니다. 나는 당신이 [** 추가 연구 **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) Google을 통해 또는 SO를 검색하여 시도하고 시도하십시오. 문제가 계속되면 ** 코드 **로 돌아와서 시도한 내용을 설명하십시오. –

답변

0

당신은 당신의 CSS에서 :nth-child selector으로 그렇게 할 수 있습니다

a:nth-child(odd):hover { 
color: red; 
} 

a:nth-child(even):hover { 
color: green; 
} 

fiddle here 작업.

+0

고마워요! 이것은 완벽하게 작동했습니다! :) – Sol

1

a:hover.altlink{ 
    color: #FF0000; 
} 
0

우리에게 우리가 도울 수있는 몇 가지 코드를 제공하려고 노력하지만,이 작업을 수행 할 수있는 여러 가지 방법이 있습니다 각기 다른 호버 효과가있는 특정 클래스를 링크에 추가 할 수 있습니다. css에서 참조되는 데이터 속성을 사용할 수도 있습니다.

우리가 더 많은 것을 도와 줄 수 있도록 코드를 제공해주십시오.

.link:nth-child(1):hover {color:blue;} 
.link:nth-child(2):hover {color:red;} 

또는

<a href="#" class="link link--blue"></a> 
<a href="#" class="link link--red"></a> 

관련 문제