php - 将悬停时的边框颜色设置为数据库中的动态颜色

Question

好的，我有 uls，它们是类别。里面的每个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 的 border-top 设置得很好。这是 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>

丰富:)

Answer 1

正如 bipen 所说，添加数据属性甚至是 rel 属性效果最好。另一种方法是遍历 lis parent :

$(function() {
    $('li.productCategoryNugget').mouseenter(function() {
        $(this).css('border-top', $(this).parents('li').css('border-top'));
    }).mouseleave(function() {
        $(this).css('border-top', 'solid 1px white');
    });
});