CSS 不使用 jQuery 改变

Question

我有一个 ul，里面有 2 里，还有一张本地地图。 如果用户悬停在 li 的其中一个区域上，地图会亮起，当用户悬停在其中一个区域上时，相应的 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' 元素上，'color' 应该放在 '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'});            
    });
});

Answer 2

你的错误是你的 id 是selector1但你试图找到selector-1 id 元素。 顺便说一句，我认为 area-1 是第一个列表项内的链接：

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

这是解决方案： https : //jsfiddle.net/g2bynfdg/

Answer 3

如果您以选择器为目标，则可以使用 $(this) 来处理该 DOM 节点。 看到这个jsfiddle 。 将鼠标悬停在该链接的开/关上时，区域 1 链接将更改样式。

HTML

<ul>         
  <li id="selector-1"><a href="#">area 1</a></li>
  <li id="selector-2"><a href="#">area 2</a></li>
</ul>

查询

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