Question

我已经通过将鼠标悬停在跨度上来改变颜色，但是由于某些原因，其中一个边框具有一个奇异的部分，从而改变了错误的颜色。

.features article .icon:after {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 0.25rem;
  border: solid 2px rgba(210, 215, 217, 0.75);
  content: '';
  display: block;
  height: 7em;
  left: 50%;
  margin: -3.5em 0 0 -3.5em;
  position: absolute;
  top: 50%;
  width: 7em;
}

.features article .icon:hover:after {
  transition: ease-out;
  border-color: inherit;
}

<!-- Section -->
<section>
  <div class="features">
    <article>
      <span><a href="#fp" class="icon solid fa-fire" id="firelogo"></a></span>
      <div class="content">
        <h3>Fire Relief</h3>
        <p>Purchases with the 'Fire Relief' charity selected will provide money to a choice fire relief charity fund. The money donated to fire relief funds could set up a 'disaster relief fund' which can provide support to families of firefighters who've
          died and people in communities impacted by the fires.
        </p>
      </div>
    </article>
    <article>
      <span><a href="#cp" class="icon solid fa-ribbon" id="cancerlogo"></a></span>
      <div class="content">
        <h3>Cancer Support</h3>
        <p>Purchases with the 'Cancer Support' charity selected will provide money to a choice cancer support fund. The fund money goes to researcher salaries , consumables and instrumentation. There have been progressively improving outcomes due to the
          funding provided through charity - more people surviving after diagnosis.</p>
      </div>
    </article>
    <article>
      <span><a href="#ap" class="icon solid fa-dna" id="aidslogo"></a></span>
      <div class="content">
        <h3>Aids Research</h3>
        <p>Purchases with the 'Aids Research' charity selected will provide money to a choice aids research fund. Funding for Aids services and activities is spread across multiple federal departments, including Health and Human Services (HHS), Housing and
          Urban Development (HUD), Justice, Veterans Affairs (VA), and Defense</p>
      </div>
    </article>
    <article>
      <span><a href="#wp" class="icon solid fa-water" id="waterlogo"></a></span>
      <div class="content">
        <h3>Water Aid</h3>
        <p>Purchases with the 'Water Aid' charity selected will provide money to a choice water aid fund. The funding works to enabale people to transform their lives with safe water, decent toilets and good hygiene in developing countries and war stricken
          areas
        </p>
      </div>
    </article>
  </div>
</section>

鼠标悬停时的样子： Row Component

这是没有悬停的样子：example

如果您需要更多信息，请告诉我

Answer 1

尝试border-bottom-color:#f9666a;;

.features article .icon:after {
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 0.25rem;
  border: solid 2px rgba(210, 215, 217, 0.75);
  content: '';
  display: block;
  height: 7em;
  left: 50%;
  margin: -3.5em 0 0 -3.5em;
  position: absolute;
  top: 50%;
  width: 7em;
}

.features article .icon:hover:after {
  transition: ease-out;
  border-color: #39befc;
  border-bottom-color:#f9666a;
}

<!-- Section -->
<section>
  <div class="features">
    <article>
      <span><a href="#fp" class="icon solid fa-fire" id="firelogo"></a></span>
      <div class="content">
        <h3>Fire Relief</h3>
        <p>Purchases with the 'Fire Relief' charity selected will provide money to a choice fire relief charity fund. The money donated to fire relief funds could set up a 'disaster relief fund' which can provide support to families of firefighters who've
          died and people in communities impacted by the fires.
        </p>
      </div>
    </article>
    <article>
      <span><a href="#cp" class="icon solid fa-ribbon" id="cancerlogo"></a></span>
      <div class="content">
        <h3>Cancer Support</h3>
        <p>Purchases with the 'Cancer Support' charity selected will provide money to a choice cancer support fund. The fund money goes to researcher salaries , consumables and instrumentation. There have been progressively improving outcomes due to the
          funding provided through charity - more people surviving after diagnosis.</p>
      </div>
    </article>
    <article>
      <span><a href="#ap" class="icon solid fa-dna" id="aidslogo"></a></span>
      <div class="content">
        <h3>Aids Research</h3>
        <p>Purchases with the 'Aids Research' charity selected will provide money to a choice aids research fund. Funding for Aids services and activities is spread across multiple federal departments, including Health and Human Services (HHS), Housing and
          Urban Development (HUD), Justice, Veterans Affairs (VA), and Defense</p>
      </div>
    </article>
    <article>
      <span><a href="#wp" class="icon solid fa-water" id="waterlogo"></a></span>
      <div class="content">
        <h3>Water Aid</h3>
        <p>Purchases with the 'Water Aid' charity selected will provide money to a choice water aid fund. The funding works to enabale people to transform their lives with safe water, decent toilets and good hygiene in developing countries and war stricken
          areas
        </p>
      </div>
    </article>
  </div>
</section>

Answer 2

等等。您是否希望1个边框为其他颜色？如果是这样，请使用border-bottom，border-right，border-left或border-top-color：rgba（color）; 或使用border-color：rgba（），rgba（），rgba（），rgba（）;每个rgba（）都是从顶部开始的一面。

悬停更改边框不均匀的颜色

2 个答案: