0

私は次のコードを持っています -

<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ルールの両方が個別に機能することを探しています。

どんな助けでもありがたく受け取られます。

ありがとう。

4

1 に答える 1

1

JavaScript を使用してスタイル属性を設定しています。これは、スタイルシートのどのルール セットよりも具体性が高くなります。

事前にスタイルを準備し、スタイルシートに配置してから、JavaScript でクラス名を追加および削除します。

于 2013-09-10T14:56:13.930 に答える