CSS在DIV悬停时更改超链接颜色答案

【问题标题】：CSS change hyperlinks colour on hover of a DIVCSS在DIV悬停时更改超链接颜色
【发布时间】：2016-06-16 06:37:54
【问题描述】：

我在获取超链接以在悬停时使用 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;
}

我尝试了很多组合，包括尝试直接指定类，如“title”和“view-details”

【问题讨论】：

这是你要找的东西吗：jsfiddle.net/vm02095v/20
您的元素中没有 id ja-jobs-widget.... 那么您以该 id 为目标的元素是什么

标签： html css hover division

【解决方案1】：

像这样更改 css...

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

【讨论】：

【解决方案2】：

您仅使用您的 css 行 .job.hot:hover, #ja-jobs-widget a { color: #fff; } 定位文本相反，您只想定位链接。所以改用.job.hot:hover a { color:fff; }

以下小提琴中的完整代码演示： https://jsfiddle.net/53g6n56q/

【讨论】：

【解决方案3】：

我假设我已经理解您了，在您的代码中，:hover 上的链接不会变白，您尝试过的操作会使它们永久变白。对吗？

在您上面发布的代码中，id #ja-jobs-widget 不在您的代码中。 CSS 应如下所示以定位 a 标签：

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

这里我们说在.job.hot 的:hover 上找到其中的任何a 标签，并将它们设为白色。

结果见下面的 sn-p。

.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 标签变白。

【讨论】：

【解决方案4】：

我没有找到任何 id 为 ja-jobs-widget 的元素，所以我修改了基于类 .job.hot 的 CSS。

试试下面的 sn-p：

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

【讨论】：

【解决方案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>

【讨论】：