Okay, so I have a bunch of p tags inside a div, each p tag has an i tag inside it... Long story short, I wanted to use some CSS3 transition effect. Now it works FINE in all other browsers, but Edge isn't accepting it, I've also done ms-transition in my CSS, just before anyone says that.
The problem is that I want a certain span that contains some i tags to stay the same colour, the rest of the tag(s) change colour from gray to red. That part works fine too, the part where the colours change is just fine. BUT in Edge, the span I want to remain the same is changing on hover.
Now I tried a simple quick fix, I tried to overwrite that rule so that when you hover over these tags that change colour, this nested span stays the same colour, so copy and paste the colour on the hover event basically.
I may not have worded this very well, I'm currently in a a bit of a rage quit kinda state, not because of just this silly issue, work today has been somewhat chaotic in my department. So yeah, if anyone could help, that would be awesome? ...
Here's the HTML:
...
<a href="###">
<p>
<i class="icon icon-check"></i>
100% Satisfaction Guarantee
<i class="icon icon-check second-icon"></i>
</p>
</a>
<a href="###">
<p>
<i class="icon icon-truck"></i>
Track Your Order
<i class="icon icon-truck second-icon"></i>
</p>
</a>
<a href="###">
<p>
<i class="icon icon-award"></i>
Award Winning Varieties
<i class="icon icon-award second-icon"></i>
</p>
</a>
<a href="###">
<p>
<i class="icon icon-certificate"></i>
Voted Best Online Retailer
<i class="icon icon-certificate second-icon"></i>
</p>
</a>
<a href="###">
<p>
<i class="icon icon-star"></i>
Our Customers Rate Our Excellent Service
<i class="icon icon-star second-icon"></i>
<!-- THIS TAG I WAS ON ABOUT -->
<span id="header-icons-golden-stars">
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<i class="icon icon-star"></i>
<i class="icon icon-star-half"></i>
</span>
</p>
</a>
...Sorry if the formatting is a little messy btw, it's actually all neat and tidy in the actual code. Now as for the css....
#usp p {
/*-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
ms-transition:all 0.5s ease;*/
cursor: pointer;
font-weight: bold!important;
vertical-align: top;
}
#usp p:hover {
color: rgb(179, 21, 21);
}
#usp p:hover #header-icons-golden-stars i {
color: #eebd2b!important;
}
#header-icons-golden-stars {
display: block;
clear: both;
color: #eebd2b!important;
margin: 0;
margin: -10px auto;
}I also apologies if the css is messy or confusing, my head is fried right now! 
If you can make sense of what I'm trying to do and if you can make sense of the code and you can actually figure out a way around this, that's great. I commented out the transition CSS because that's what was causing the bug.
// EDIT : Put the CSS into a CSS beautifier online, just so it's nicer to look at rather than looking at the compiled version, I also added important on the stars colour, other than that, it's all the same AND still doesn't work.
The only other way I can think of doing this where it may work is by changing the HTML quite a fair bit, and of course, the CSS too. But right now, my head is WAY too fried to do that, I'm not gonna lie... Plus there's the lack of time too, I mean I've got another 3 minutes till home time.. 
Finally, I forgot to mention, this line #usp p:hover #header-icons-golden-stars i, I've also tried removing the i from it in my CSS, it makes no difference.