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代码，任何将来悬停在图标上都会导致忽略CSS悬停代码。我怀疑这是由jQuery引起的，但作为一个新手，我不确定如何解决。

我正在寻找单独工作的jQuery和CSS规则，无论是否首先激活jQuery样式。

感谢任何帮助。

感谢。

Answer 1

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

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

jQuery阻止CSS规则一度悬停

1 个答案: