0

好的，所以我有 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 的边框顶部。这是 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 所说，添加数据属性甚至 rel 属性效果最好。另一种方法是遍历 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

事实证明，我把情况复杂化了。我给了样式，在内联样式中设置了边框颜色，然后对于 li a 的边距为 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 回答
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 回答