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>

Rich：）

Answer 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');
    });
});

Answer 2

还有很多其他方法可以解决这个问题...遍历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')
});

Answer 3

从持有它的跨度中抓取颜色。像

这样的东西

$(".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" );
  });

Answer 4

这就是我认为应该如此。取color $(this).parent().parent().children('.productRangeTitle')，然后根据需要使用。

这是一个小提琴的例子。 Fiddle

Answer 5

事实证明，我的情况太复杂了。我给了样式，在内联样式中设置边框颜色，然后对于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}

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

5 个答案: