CSSがDIVのホバー上でハイパーリンクの色を変更する

Question

ハイパーリンクを取得して、ホバー上のDIVで色のプロパティを変更する際に問題があります。

リンクが＃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; 
} 

によって引き起こされます

私はあなたのコード内のリンクは、:hoverに白い行っていない、私はあなたを理解してきたと仮定している「ビュー-詳細」

Answer 1

&直接「タイトル」のようなクラスを指定しようとするなど、組み合わせの多くを試してみましたあなたが試みたことは、それらを永久に白くする。正しい？

上記のコードでは、#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; } をテキストをターゲットにしている代わりに、あなただけのリンクをターゲットにしたいです。だからではなく、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>