私は次のコードを持っています -
<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スタイルが最初にアクティブ化されたかどうかに関係なく、jQueryとCSSルールの両方が個別に機能することを探しています。
どんな助けでもありがたく受け取られます。
ありがとう。