好的，我有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>
.productCategoryNugget:hover {
border: 1px solid;
}
类别颜色存储在$range中。productscategorycolor设置包含字体的边框顶部。它是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>
丰富:)
就像bipen说的，添加一个data属性或者rel属性是最好的。另一种方法是遍历list的父元素:
$(function() {
$('li.productCategoryNugget').mouseenter(function() {
$(this).css('border-top', $(this).parents('li').css('border-top'));
}).mouseleave(function() {
$(this).css('border-top', 'solid 1px white');
});
});
有很多其他方法可以得到这个…遍历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')
});
从span中获取颜色。就像
$(".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" );
});
我认为应该是这样的。取$(this).parent().parent().children('.productRangeTitle')中的color，然后随意使用。
这里有一个小提琴的例子。小提琴
事实证明，我把情况复杂化了。我给了样式，在内联样式中设置了border-color，然后为li设置了margin为1px, border为0px，然后在悬停时，设置border为1px, margin为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}