3

jQueryが初めてで、私がやろうとしていることを達成する方法がよくわかりません。サーバーは HTML のみで動作します - PHP や Ruby は利用できません (それと私はまだこれらの言語に慣れていません)。最新のjQuery 1.10.2も使用しています

私が持っているのは、それぞれにプレビュー画像とタイトル リボン (具体的には) があるタイルのメニューです。マウス カーソルをタイルの上に置いたときに、タイトルのリボンの背景の不透明度を変更する必要があります。

これまでのところ、ある程度は機能するようになっていますが、問題は、マウスカーソルがタイルの上に置かれるたびに、ホバーされているタイトルだけでなく、すべてのタイトルの不透明度が変化することです。.index を使用して「li」要素のインデックス番号を取得し、それを返して識別子として使用しようとしましたが、うまくいきませんでした。私もこのようなことをしようとしました：

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
            },
            mouseleave: function () {
                $(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
            }
        });
    });
</script>

しかし、それを続けて変更する方法がわかりませんでした$('.tt1').css

だからここに私がこれまでに持っているものの関連するコードの断片があります...

jQuery コード:

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $('.tt1').css('opacity', '1.0');
            },
            mouseleave: function () {
                $('.tt1').css('opacity', '0.6');
            }
        });
    });
</script>

HTML コード:

<menu>
    <ul class="collumn-left">
        <li><a href="#About"><div class="tt1">About</div></a></li>
        <li><a href="#Test"><div class="tt1">Test</div></a></li>
    </ul>
    <ul class="collumn-right">
        <li><a href="#Random"><div class="tt1">Random</div></a></li>
        <li><a href="#More"><div class="tt1">More</div></a></li>
    </ul>
</menu>

CSS コード:

/*  menu section begin */
menu {
    background-color: silver;
    box-shadow: 0 5px 10px #6A6A6A;
}
menu li {
    margin: 0;
    padding: 0;
    display: block;
}
.collumn-left,
.collumn-right {
    margin: 0;
    padding: 0;
    float: left;
}
.collumn-left a,
.collumn-right a {
    float: left;
    border: none;
    list-style: none;
    color: #000000;
    text-decoration: none;
}
.tt1 {
    background-color: grey;
    opacity: 0.6;
    font-weight: bolder;
    text-align: center;
}
.tt1:hover {
    opacity: 1.0;
}
/*  menu section end */

/*  Medium display size - Tablet devices & Desktops/Laptops */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    menu {
        min-width: 370px;
        width: 1024px;
        margin: auto;
        padding: 5px;
        box-shadow: 0 5px 10px #6A6A6A;
    }
    .collumn-left,
    .collumn-right {
        width: 512px;
    }
    .collumn-left a,
    .collumn-right a {
        width: 502px;
        height: 502px;
        margin: 5px;
        padding: 0;
    }
    .tt1 {
        margin: 325px 0 102px 0;
        font-size: 35px;
        line-height: 75px;
    }
    article {
        margin: 0 10% 0 10%;
    }
}

/*  High Display Resolution Desktops/Laptops */
@media only screen and (min-width: 1281px) {
    menu {
        min-width: 370px;
        width: 1540px;
        margin: auto;
        padding: 5px;
        box-shadow: 0 5px 10px #6A6A6A;
    }
    .collumn-left,
    .collumn-right {
        width: 770px;
    }
    .collumn-left a,
    .collumn-right a {
        width: 760px;
        height: 760px;
        margin: 5px;
        padding: 0;
    }
    .tt1 {
        margin: 500px 0 160px 0;
        font-size: 40px;
        line-height: 100px;
    }
    article {
        margin: 0 10% 0 10%;
    }
}
4

3 に答える 3

4

次の JavaScript コードを試してください。

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $(this).find(".tt1").css('opacity', '1.0');
            },
            mouseleave: function () {
                $(this).find(".tt1").css('opacity', '0.6');
            }
        });
    });
</script>

編集：

これを達成するための別の、おそらくよりクリーンな方法は次のとおりです。

CSS

.tt1:hover, .tt1.hover {
    opacity: 1.0;
}

Javascript

<script>
    $(function() {
        $('menu ul li').on({
            mouseenter: function () {
                $(this).find(".tt1").addClass("hover");
            },
            mouseleave: function () {
                $(this).find(".tt1").removeClass("hover");
            }
        });
    });
</script>

CSS を編集するだけで、他の機能を簡単に追加できます。たとえば、小さな画面用の素敵なトランジションやさまざまなスタイルなどです。

于 2013-10-07T17:50:28.860 に答える
2

JavaScriptは必要ありません.cssを使用するだけです.

menu ul li .ttl:hover {
   opacity:1.0;
}
于 2013-10-07T17:55:32.117 に答える
1

$(this).find('.tt1').css('opacity', '1.0');

find()クラスtt1を持つホバーされた要素の子要素を探します。

于 2013-10-07T17:50:23.743 に答える