변화 HTML 텍스트는 2

Question

나는 또 다른 질문에서 다음 CSS를 한 :

<div class="container"> 
    <a href="#" class="title">Title</a> 
    <span class="username">username</span> 
    <span class="dateandtime">date and time</span> 
</div> 

이만큼 나는 다음과 같은 HTML을 가지고 작품을 좋아

.title {color:#707070;} 
.username {color:#8DAAB8;} 
.dateandtime {color:#A5A7AC;} 

.container:hover .title { color: #000000; } 
.container:hover .username { color: #DF821B; } 
.container:hover .dateandtime { color: #3185B6; } 

(다음은 코드 조각입니다)

개별 컨테이너에서 어떻게 작동합니까? html은 서버 측 코드를 통해 동적으로 생성됩니다. 예를 들어

: 나는이 용기의 사람 위에 마우스를 올려 경우, 위의 CSS를 사용하여

<div class="container"> 
    <a href="#" class="title">Title1</a> 
    <span class="username">username1</span> 
    <span class="dateandtime">date and time1</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title2</a> 
    <span class="username">username2</span> 
    <span class="dateandtime">date and time2</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title3</a> 
    <span class="username">username3</span> 
    <span class="dateandtime">date and time3</span> 
</div> 

<div class="container"> 
    <a href="#" class="title">Title4</a> 
    <span class="username">username4</span> 
    <span class="dateandtime">date and time4</span> 
</div> 

, 그것은 모든 컨테이너의 색상을 변경 끝납니다. 마우스를 가져 가면 컨테이너 안의 항목의 색상이 바뀌어야합니다.

어떻게이 작업을 수행 할 수 있습니까?

Answer 1

코드에 표시된 코드 ()는 잘 작동합니다.

대부분은 div35에 모두 container 클래스가있는 모든 div를 포함하고있을 가능성이 큽니다. 코드는 "잘"작동합니다, 귀하의 작업 코드는 http://jsfiddle.net/2TnKr/

Answer 2

네에서 살고

(는 같은 효과를 가질 것이다 사업부를 닫습니다 잊어). 앵커 태그가 아닌 HTML 엔터티에 마우스를 가져 가면 브라우저마다 매우 다를 수 있다는 점에 유의하십시오.