CSS에서 DIV의 가져 오기시 하이퍼 링크 색상을 변경하십시오.

Question

하이버 링크를 가져 오는 동안 DAB가있는 색상 속성을 변경하는 데 문제가 있습니다.

# 80c8ac 인 링크가있는 흰색 div가 필요합니다. 마우스를 올리면 div가 # 80c8ac가되고 #fff가됩니다. 텍스트는 # 152128 그대로 유지됩니다. 내가 극복 할 수

내 문제는 텍스트 변경 호버 상태에 #fff하고 처음 상태 여기

에 #fff 될 링크는 HTML

.job.hot { 
 
    color: #152128; 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    width: 30%; 
 
    float: left; 
 
    margin: 0 15px 0 20px; 
 
} 
 
#ja-jobs-widget a { 
 
    color: #80c8ac; 
 
} 
 
#ja-jobs-widget summary { 
 
    color: #80c8ac; 
 
} 
 
.job.hot:hover { 
 
    background-color: #00D9BD; 
 
} 
 
.job.hot:hover, 
 
#ja-jobs-widget { 
 
    color: #152128; 
 
} 
 
.job.hot:hover, 
 
#ja-jobs-widget a { 
 
    color: #fff; 
 
}

<div class="ja-job-list-container"> 
 
    <div class="ja-job-list"> 
 
    <div class="job hot"> 
 
     <h2 class="title"><a data-job-id="507911" href="#" title="Front End Developer">Front End Developer</a></h2> 
 
     <div class="meta"> 
 
     <ul class="classifications"> 
 
      <li data-id="16813">IT &amp; Telecomms</li> 
 
      <li data-id="16814">Web/Multimedia Developer</li> 
 
      <li data-id="16815">Sydney</li> 
 
      <li data-id="16816">Permanent/Full Time</li> 
 
     </ul> 
 
     <p class="date-posted">12/6/2016</p> 
 
     </div> 
 
     <p class="summary">This is an outstanding opportunity for a Front End Developer to join this highly skilled team.</p> 
 
     <a class="view-details" data-job-id="507911" href="#" title="More..">More..</a> 
 
    </div> 
 
    </div>

점이다

상술 한 문제는

.job.hot:hover, #ja-jobs-widget a { 
    color: #fff; 
} 

의해 발생

617,451,515,

내가 직접 '제목'& 같은 클래스를 지정하는 노력을 포함하여 조합을 많이 해봤 '보기 - 세부 정보'내가 코드에서 링크 :hover에 흰색 가지 마세요, 당신을 이해했습니다 있으리라 믿고있어

Answer 1

, 당신이 시도한 것은 그들이 순전히 하얀색이되게합니다. 옳은?

위에서 게시 한 코드에 ID #ja-jobs-widget이 코드에 없습니다. CSS의는 a 태그를 대상으로 다음과 같이해야한다 : 여기

.job.hot:hover a { 
    color: #fff; 
} 

우리가 그 .job.hot의 :hover에 내부의 a 태그를 찾을 말을하고 흰색합니다.

결과를 보려면 아래 스 니펫을 참조하십시오.

.job.hot { 
 
    color: #152128; 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    width: 30%; 
 
    float: left; 
 
    margin: 0 15px 0 20px; 
 
} 
 
#ja-jobs-widget a { 
 
    color: #80c8ac; 
 
} 
 
#ja-jobs-widget summary { 
 
    color: #80c8ac; 
 
} 
 
.job.hot:hover { 
 
    background-color: #00D9BD; 
 
} 
 
.job.hot:hover, 
 
#ja-jobs-widget { 
 
    color: #152128; 
 
} 
 
.job.hot:hover a { 
 
    color: #fff; 
 
}

<div class="ja-job-list-container"> 
 
    <div class="ja-job-list"> 
 
    <div class="job hot"> 
 
     <h2 class="title"><a data-job-id="507911" href="#" title="Front End Developer">Front End Developer</a></h2> 
 
     <div class="meta"> 
 
     <ul class="classifications"> 
 
      <li data-id="16813">IT &amp; Telecomms</li> 
 
      <li data-id="16814">Web/Multimedia Developer</li> 
 
      <li data-id="16815">Sydney</li> 
 
      <li data-id="16816">Permanent/Full Time</li> 
 
     </ul> 
 
     <p class="date-posted">12/6/2016</p> 
 
     </div> 
 
     <p class="summary">This is an outstanding opportunity for a Front End Developer to join this highly skilled team.</p> 
 
     <a class="view-details" data-job-id="507911" href="#" title="More..">More..</a> 
 
    </div> 
 
    </div>

가 #ja-jobs-widget 경우이 코드의 용기의 ID이며, 해당 ID로 용기 내부에만 링크가 흰색 가고 있는지 확인하려면, 당신이 할 수 있습니다 :

#ja-jobs-widget .job.hot:hover a { 
    color: #fff; 
} 

그래서 먼저, #ja-jobs-widget을 찾을 .job.hot의 :hover에 모든 a 태그 내부에 흰색 갈 수 있도록. 이 같은

Answer 2

변경 CSS를 ... 당신은 당신의 CSS 라인의 텍스트를 대상으로하는

.job.hot:hover a, #ja-jobs-widget a { 
color: #fff; 
} 

Answer 3

는 .job.hot:hover, #ja-jobs-widget a { color: #fff; } 는 대신 링크 만 대상으로합니다. 그래서 대신 folowing 바이올린에 .job.hot:hover a { color:fff; }

전체 코드 데모를 사용 https://jsfiddle.net/53g6n56q/

Answer 4

그래서 내가 클래스 .job.hot에 따라 CSS를 수정 한 ID ja-jobs-widget있는 모든 요소를 ​​찾을 수 없습니다.

는 아래의 조각을 시도해보십시오

.job.hot { 
 
    color: #152128; 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    width: 30%; 
 
    float: left; 
 
    margin: 0 15px 0 20px; 
 
} 
 
.job.hot a { 
 
    color: #80c8ac; 
 
} 
 
.job.hot:hover { 
 
    background-color: #00D9BD; 
 
} 
 
.job.hot:hover a, 
 
.job.hot:hover a:hover { 
 
    color: #fff; 
 
}

<div class="ja-job-list-container"> 
 
    <div class="ja-job-list"> 
 
    <div class="job hot"> 
 
     <h2 class="title"><a data-job-id="507911" href="#" title="Front End Developer">Front End Developer</a></h2> 
 
     <div class="meta"> 
 
     <ul class="classifications"> 
 
      <li data-id="16813">IT &amp; Telecomms</li> 
 
      <li data-id="16814">Web/Multimedia Developer</li> 
 
      <li data-id="16815">Sydney</li> 
 
      <li data-id="16816">Permanent/Full Time</li> 
 
     </ul> 
 
     <p class="date-posted">12/6/2016</p> 
 
     </div> 
 
     <p class="summary">This is an outstanding opportunity for a Front End Developer to join this highly skilled team.</p> 
 
     <a class="view-details" data-job-id="507911" href="#" title="More..">More..</a> 
 
    </div> 
 
    </div> 
 
</div>

다음과 같이 수행 할 수 있습니다 달성하기 위해 노력하고 무엇

Answer 5

:

.job.hot { 
 
    color:#152128; 
 
    background-color: #fff; 
 
    padding: 20px; 
 
    width: 30%; 
 
    float: left; 
 
    margin: 0 15px 0 20px; 
 
    } 
 

 
    .job.hot a { 
 
    color: #80c8ac; 
 
} 
 
.job.hot:hover { 
 
    background-color: #00D9BD; 
 
} 
 
.job.hot:hover a{ 
 
    color: #fff; 
 
}

<div class="ja-job-list-container"> 
 
     <div class="ja-job-list"> 
 
     <div class="job hot"> 
 
      <h2 class="title"><a data-job-id="507911" href="#" title="Front End Developer">Front End Developer</a></h2> 
 
      <div class="meta"> 
 
       <ul class="classifications"> 
 
        <li data-id="16813"> IT &amp; Telecomms </li> 
 
        <li data-id="16814"> Web/Multimedia Developer </li> 
 
        <li data-id="16815"> Sydney </li> 
 
        <li data-id="16816"> Permanent/Full Time </li> 
 
       </ul> 
 
       <p class="date-posted"> 12/6/2016 </p> 
 
      </div> 
 
       <p class="summary">This is an outstanding opportunity for a Front End Developer to join this highly skilled team.</p> 
 
      <a class="view-details" data-job-id="507911" href="#" title="More..">More..</a> 
 
    </div> 
 
    </div> 
 
</div>