0

OK、カテゴリであるulがあります。内の各liには、白で1pxの境界線があります。これは、liが白の背景にあるため、liにカーソルを合わせたときに移動を停止するために表示されません。

ホバー時に、境界線の色を、データベースからユーザーがそのカテゴリに選択した色に変更したいと思います。

これがマークアップです

<ul class="productRange">

    {foreach $productRange index range}

        <li style="border-top: 1px solid {$range.productsCategoryColour}">
            <span class="productRangeTitle"style="color{$range.productsCategoryColour}">{$range.itemTitle}</span>

            <ul class="productCategoryView">

             {foreach $range.products ind product}

             <li class="productCategoryNugget">

             <a href="{$product.productURL}">
             <img src="/assets/layout/no_image_image.png" />{$product.productTitle}
             </a>

            </li>

            {/foreach}

            </ul>

        </li>       

    {/foreach}

</ul>

CSS .. ..

 .productCategoryNugget:hover {
      border: 1px solid;
  }

カテゴリの色は$range.productsCategoryColourに格納され、含まれているliの境界の上部を細かく設定します。ul productCategoryView内のliで、ホバーに境界線が表示されます。現在はすべて黒ですが、カテゴリの色と一致させたいです。

これが出力HTMLです

     <ul class="productRange">


        <li style="border-top: 1px solid #0d2d94">
            <span class="productRangeTitle"style="color:#0d2d94">CADAC Patio Range</span>

            <ul class="productCategoryView">


                    <li class="productCategoryNugget">
                        <a href="stratos">
                        <img src="/assets/layout/no_image_image.png" />Stratos 4 Burner
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="stratos-3-burner">
                        <img src="/assets/layout/no_image_image.png" />Stratos 3 Burner
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="braai-maxx">
                        <img src="/assets/layout/no_image_image.png" />BraaiMaxx
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian-4-burner-side-table">
                        <img src="/assets/layout/no_image_image.png" />Meridian 4 Burner & Side Table
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian-3-burner">
                        <img src="/assets/layout/no_image_image.png" />Titan 4 Burner
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="free-standing-meridian-4-burner">
                        <img src="/assets/layout/no_image_image.png" />Free-Standing Meridian 4 Burner
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian">
                        <img src="/assets/layout/no_image_image.png" />Meridian 3 Burner & Side Burner
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="free-standing-meridian-3-burner">
                        <img src="/assets/layout/no_image_image.png" />Free-Standing Meridian
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="titan">
                        <img src="/assets/layout/no_image_image.png" />Stratos
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian-accessories">
                        <img src="/assets/layout/no_image_image.png" />Meridian Accessories
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian-4-burner-side-burner">
                        <img src="/assets/layout/no_image_image.png" />Meridian
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian-3-burner-side-table">
                        <img src="/assets/layout/no_image_image.png" />Meridian 3 Burner & Side Table
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="meridian-4-burner">
                        <img src="/assets/layout/no_image_image.png" />Titan
                        </a>
                    </li>


            </ul>

        </li>       


        <li style="border-top: 1px solid #ff0000">
            <span class="productRangeTitle"style="color:#ff0000">CADAC Charcoal Range</span>

            <ul class="productCategoryView">


                    <li class="productCategoryNugget">
                        <a href="charcoal-mate-50cm">
                        <img src="/assets/layout/no_image_image.png" />Charcoal Mate 50cm
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="some-bbq">
                        <img src="/assets/layout/no_image_image.png" />Charcoal Pro Deluxe 57cm
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="some-other-bbq">
                        <img src="/assets/layout/no_image_image.png" />Charcoal Pro 57cm
                        </a>
                    </li>

                    <li class="productCategoryNugget">
                        <a href="charcoal-mate-57cm">
                        <img src="/assets/layout/no_image_image.png" />Charcoal Mate 57cm
                        </a>
                    </li>


            </ul>

        </li>       


        <li style="border-top: 1px solid #ebe300">
            <span class="productRangeTitle"style="color:#ebe300">CADAC Chef Range</span>

            <ul class="productCategoryView">



            </ul>

        </li>       


        <li style="border-top: 1px solid #00a2ff">
            <span class="productRangeTitle"style="color:#00a2ff">CADAC Braai Range</span>

            <ul class="productCategoryView">



            </ul>

        </li>       


        <li style="border-top: 1px solid #0d8a02">
            <span class="productRangeTitle"style="color:#0d8a02">CADAC Accessories</span>

            <ul class="productCategoryView">



            </ul>

        </li>       
    </ul>

リッチ ：）

4

5 に答える 5

1

bipen が言ったように、data 属性または rel 属性を追加するのが最適です。もう 1 つの方法は、lis の親を反復処理することです。

$(function() {
    $('li.productCategoryNugget').mouseenter(function() {
        $(this).css('border-top', $(this).parents('li').css('border-top'));
    }).mouseleave(function() {
        $(this).css('border-top', 'solid 1px white');
    });
});
于 2013-03-07T14:02:50.130 に答える
0

これを取得するには他にも多くの方法があります...DOMをトラバースする..parent()ホバー要素を見つけて色を取得する..しかし、(私の知る限り)簡単で優れたパフォーマンスは、HTML 5データ属性をliに追加することです..

<li class="productCategoryNugget" data-color="{$range.productsCategoryColour}" >

そしてjqueryで

$('.productCategoryNugget').hover(function(){
    var proColor=$(this).data('color'); //get data color value
    $(this).css('border-top','1px solid '+proColor) ;
},function(){
     $(this).css('border-top','1px solid')
});
于 2013-03-07T13:59:17.407 に答える
0

それを保持しているスパンから色をつかみます。何かのようなもの

$(".productCategoryNugget").hover(
    function(){
             var parentLi = $(this).parent().parent();
             $(this).css("border-top": parentLi.css("border-top") );
     },
    //unset the border-color
    function(){
        $(this).css("border-top": "1px solid" );
  });
于 2013-03-07T14:03:00.740 に答える
0

これが私がそうあるべきだと思う方法です。手に取ってcolor、$(this).parent().parent().children('.productRangeTitle')お好きなようにお使いください。

ここにフィドルの例があります。フィドル

于 2013-03-07T14:41:49.287 に答える
0

結局のところ、私は状況を複雑にしすぎていました。にスタイルを指定し、境界線の色をインライン スタイルに設定し、li の場合は余白を 1px に設定し、境界線を 0px に設定し、ホバー時に境界線を 1px に設定し、余白を 0px にすべて CSS で設定します。 、jQueryは必要ありません...

CSS ....

.productCategoryNugget a {
text-decoration: none;
display: block;
height: 150px;
overflow: hidden;
color: #55687A;
margin: 1px;
}

.productCategoryNugget a:hover {
border: 1px solid;
margin: 0;
}

マークアップ (私は DWOO テンプレート エンジンを使用していることに注意してください)

{foreach $range.products ind product}

<li class="productCategoryNugget">
<a href="{$product.productURL}" style="border-color: {$range.productsCategoryColour}">
<img src="/assets/layout/no_image_image.png" />{$product.productTitle}
</a>
</li>
{/foreach}
于 2013-03-07T15:03:51.923 に答える