3

こちらのページをご覧ください：

http://176.32.230.17/printingcrazy.com/branding-services

ホバー効果を実現しようとしているので、リストされているサービスのいずれかにカーソルを合わせると、関連する画像にたとえば境界線が表示されます。

画像にカーソルを合わせると、関連するテキストの色が変わります。

左側の要素は、右側の要素とは別の親にあります。

はい、私はCSS を見てきました: 1 つの要素をホバーすると、複数の要素に影響しますか? すべてを試しましたが、私の状況に適用することはできません。

どんな助けでも本当に感謝します!

<div class="servicepage">

<div class="serviceleft">
<img src="/digitalprint.jpg">
<img src="/dyesub.jpg">
</div>

<div class="serviceright">
<ul>
<li>
<h3>Digital Print</h3>
</li>
<li>
<h3>Dye Sublimation</h3>
</li>
</ul>
</div>

</div>
4

3 に答える 3

1

あなたはこれを行うことができます。

HTML:

<div class="servicepage">
    <div class="serviceleft">
        <img class="digitalprint" src="/digitalprint.jpg">
        <img class="dyesub" src="/dyesub.jpg">
    </div>
    <div class="serviceright">
        <ul>
            <li class="digitalprint">
                 <h3>Digital Print</h3>
            </li>
            <li class="dyesub">
                 <h3>Dye Sublimation</h3>
            </li>
        </ul>
    </div>
</div>

Jクエリ:

$(".serviceleft > img").hover(

function () {
    var imgclass = $(this).attr("class");
    $("li." + imgclass).css("color", "red");
},

function () {
    var imgclass = $(this).attr("class");
    $("li." + imgclass).css("color", "black");
});
于 2013-04-08T01:31:39.447 に答える
1

サイトでマークアップのコードを再現しようとしましたが、この jQuery コードは機能するはずです。コピーしてサイトに貼り付けてください。

<script type="text/javascript">
    $(document).ready(function(){
        $(".serviceright h3").mouseenter(function(){
            var indexH3 = $(this).parent().index();
            $(".serviceleft .spotlight").eq(indexH3).addClass("border");
        });
        $(".serviceright h3").mouseleave(function(){
            $(".serviceleft .spotlight").removeClass("border");
        });

        $(".serviceleft .spotlight").mouseenter(function(){
            var indexA = $(this).index();
            $(".serviceright h3").eq(indexA).addClass("redtext");
        });
        $(".serviceleft .spotlight").mouseleave(function(){
            $(".serviceright h3").removeClass("redtext");
        });
    });
</script>

ホバー効果のためにいくつかの CSS クラスを追加する必要があります。たとえば、

.border {
    border: 1px solid red;
}

.redtext {
    color: red;
}

ホバー効果のプロパティを設定し、それらのクラスの名前を変更する必要がある場合は、jQuery コードでもそれらの名前を変更します。

そしてここにデモがあります

于 2013-04-08T02:07:29.327 に答える