懸停的DIV上的CSS更改超鏈接顏色

Question

我有一個獲取超鏈接來更改懸停時的DIV顏色屬性的問題。

我想要一個白色的div，鏈接是＃80c8ac。懸停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; 
} 

引起

我試過很多的組合，包括試圖直接指定類，如「標題」 &的「視圖細節」

Answer 1

我假設我理解你，在你的代碼的鏈接不會白走在:hover ，你試過的東西讓他們永遠白色。正確？

在您上面發佈的代碼中，代碼中沒有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像這樣...

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

Answer 3

你只與你的CSS行鍼對文本.job.hot:hover, #ja-jobs-widget a { color: #fff; } 相反，你要只針對鏈接。因此，而不是使用.job.hot:hover a { color:fff; }

的完整代碼演示在如下因素小提琴： https://jsfiddle.net/53g6n56q/

Answer 4

我沒有找到ID ja-jobs-widget任何元素，所以我已經修改了基於.job.hot類的CSS。

嘗試下面的代碼片段：

.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>