一旦悬停，jQuery 就会阻止 CSS 规则

Question

我有以下代码-

<p id="rightSide">When I’m not designing websites you can find me posting on 
<a href="https://www.facebook.com" target="_blank" id="linkTopFacebook">Facebook</a> or 
<a href="https://twitter.com" target="_blank" id="linkTopTwitter">tweeting</a> 
very useless but at times funny things or, if I’m out and about, taking the occasional 
<a href="http://instagram.com" target="_blank" id="linkTopInstagram">photo</a> on my
iPhone.<br><br>In addition to the above you can also contact me by <a 
href="mailto:hello.com" id="linkTopMail">Email</a> or by calling me on 123456789.</p>

            <div id="contactTop">

                <a href="mailto:hello.com"><i class="icon-envelope-alt" id="topMail"></i></a>
                <a href="http://uk.linkedin.com/" target="_blank"><i class="icon-linkedin" id="topLinked"></i></a>
                <a href="https://www.facebook.com" target="_blank"><i class="icon-facebook" id="topFacebook"></i></a>
                <a href="https://twitter.com" target="_blank"><i class="icon-twitter" id="topTwitter"></i></a>
                <a href="http://instagram.com" target="_blank"><i class="icon-instagram" id="topInstagram"></i></a>

            </div>

使用以下 jQuery -

$(document).ready(function(){

// Facebook top link

$("#linkTopFacebook").hover(function(){
    $("#topFacebook").css("color", "#3C58A1");
},
    function() {
    $("#topFacebook").css("color", "#B3B3B3");
    });

// Twitter top link

$("#linkTopTwitter").hover(function(){
    $("#topTwitter").css("color", "#21CCFC");
},
    function() {
    $("#topTwitter").css("color", "#B3B3B3");
    $("#topTwitter").preventDefault();
    });

// Instagram top link

$("#linkTopInstagram").hover(function(){
    $("#topInstagram").css("color", "#A4765C");
},
    function() {
    $("#topInstagram").css("color", "#B3B3B3");
    });

// Email top link

$("#linkTopMail").hover(function(){
    $("#topMail").css("color", "#CDC93E");
},
    function() {
    $("#topMail").css("color", "#B3B3B3");
    });


});

最后是 CSS -

div#contactTop a {
text-decoration:none;
}

div#contactTop i#topMail:hover {
color:#CDC93E;
}

div#contactTop i#topFacebook:hover {
color:#3C58A1;
}

div#contactTop i#topTwitter:hover {
color:#21CCFC;
}

div#contactTop i#topInstagram:hover {
color:#A4765C;
}

div#contactTop i#topLinked:hover {
color:#1174B3;
}

似乎如果我将鼠标悬停在文本链接上，激活 jQuery 代码，任何 future 悬停在图标上的代码都会导致 CSS 悬停代码被忽略。我怀疑这是由 jQuery 引起的，但作为新手我不确定如何解决。

无论是否首先激活了 jQuery 样式，我都希望 jQuery 和 CSS 规则能够单独工作。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

您正在使用 JavaScript 设置样式属性。这比样式表中的任何规则集都具有更高的特异性。

提前准备样式，将它们放入样式表中，然后使用 JavaScript 添加和删除类名。