悬停改变边框颜色不均匀

Question

I have gotten the colour to change by hovering the mouse over the span but for some reason one of the borders has a singular segment that changes to the wrong colour.

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

This is what it looks like while it hovers over: example

And this is what is looks like without hover:

If you need any more information just let me know

Answer 1

Try 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

wait. Do you want 1 border to be a different color? If so use border-bottom,border-right,border-left or border-top-color: rgba(color); Or use border-color: rgba(), rgba(), rgba(), rgba(); each rgba() is a side starting with top.