jquery - 使用 jQuery 不更改 Css

Question

我有一个 ul，里面有 2 个 li，还有一张本地 map 。如果用户将鼠标悬停在其中一个 li 上，则 map 会在这些区域上亮起，当用户将鼠标悬停在其中一个区域上时，相应的 li 应该亮起。

它确实有效，但不是 100% 有效，唯一改变的是填充，但颜色没有改变，列表样式也没有改变。

<ul>         
<li id="selector1"><a href="#">area 1</a></li>
<li id="selector2"><a href="#">area 2</a></li>
</ul>


$(function() {
    $('#area-1').hover(function() {
        $('#selector-1').css({
            'list-style':'square',
            'padding':'.5em 0',
            'color':'#0a6480',
        });
    }, function() {
        // on mouseout, reset the color
        $('#selector-1').css({
            'list-style':'none',
            'padding':'.2em 0',
            'color':'#FFF'
        });
    });
});

Answer 1

快速回答:

'list-style' 支持 'UL' 元素，“颜色”应该放在“A”元素上

代码示例:

<ul>         
<li id="selector1"><a href="#">area 1</a></li>
<li id="selector2"><a href="#">area 2</a></li>
</ul>


$(function() {
    $('#area-1').hover(function() {
        $('#selector-1').css({'padding':'.5em 0'});
        $('#selector-1').closest('ul').css({'list-style':'square'});
        $('#selector-1').find('a').css({'color':'#0a6480'});
    }, function() {
        // on mouseout, reset the color
        $('#selector-1').css({'padding':'.2em 0'});
        $('#selector-1').closest('ul').css({'list-style':'none'});
        $('#selector-1').find('a').css({'color':'#FFF'});            
    });
});