Question

我遇到了在悬停时使用DIV更改颜色属性的超链接的问题。

我想要一个白色div，链接为＃80c8ac。将鼠标悬停在＃80c8ac和链接#fff上。该文本将保留＃152128。

我无法克服的问题是，文本在悬停状态下更改为#fff，链接在第一个状态下变为#fff

这里是HTML

＆＃13;

// Just call the recursive function with an empty list of elements
private boolean checkLink(ArrayList<Integer> dataListFirst, int match) {
    return checkLink(dataListFirst, match, new ArrayList<Integer>());
}


private boolean checkLink(ArrayList<Integer> dataListFirst, int match, List<Integer> nodes) {
    if (dataListFirst != null) {
        for (int data : dataListFirst) {
            if (nodes.contains(data)) {
                return false;
            }
            nodes.add(data);
            if (data == match || checkLink(graphList.get(data), match, nodes)) {
                return true;
            }
        }
    }
    return false;
}

＆＃13;

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

＆＃13;

上述问题是由

引起的

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

我尝试了很多组合，包括尝试直接指定类似＆＃39; title＆＃39; ＆安培; ＆＃39;视图细节＆＃39;

Answer 1

我假设我已经理解了你，在你的代码中，:hover上的链接不会变白，你尝试过的东西会让他们永远变成白色。正确的吗？

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

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

我们在:hover .job.hot 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

如果#ja-jobs-widget .job.hot:hover a { color: #fff; }是此代码容器的ID，并且您希望确保只有具有该ID的容器内的链接变为白色，则可以执行以下操作：

#ja-jobs-widget

首先找到:hover，然后在.job.hot的{{1}}上，让所有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

我找不到任何标识为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>

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

5 个答案: