CODEWITHSUNDEEP
jqueryhtmlcss
OxfordSi
OxfordSi

Reputation: 177

jQuery preventing CSS rule once hovered

I have the following code - 

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

With the following 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");
    });


});

and finally 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;
}

It seems that if I hover over the text link, activating the jQuery code that any future hover over the icon results in the CSS hover code being ignored. I have a suspicion that this is being caused by jQuery but as a novice I am unsure how to resolve.

I'm looking for both the jQuery and CSS rules to work separately regardless if whether the jQuery style was activated first.

Any help would be gratefully received.

Thanks.

Upvotes: 0

Views: 75

Answers (1)

Quentin
Quentin

Reputation: 943480

You are using JavaScript to set the style attribute. This has a higher specificity then any rule-set in a stylesheet.

Prepare your styles in advance, put them in the stylesheet, and then add and remove class names with your JavaScript.

Upvotes: 1

Related Questions