Question

我喜欢构建我的程序，当我mouseover确定<li>其字体粗细更改为粗体时，其他<li>'s仍然具有正常的字体粗细，当我{来自该特殊mouseout的{1}}其字体返回正常！它必须适用于所有<li>标签......

在我的代码中，如果我<li>它和childes font-weight＆＃39; s将设置为粗体（它不是我想要的）！

如果我a：hover或a:hover只是a或{1}}更改为粗体，对我有好处。

Here是小提琴。

a1:hover

Answer 1

只需使用这样的CSS：

li li:hover {
    font-weight: bold;
}

也删除你最后的CSS规则。

希望这有帮助！

Answer 2

删除上一个CSS规则并使用：

ul li ul li:hover {
    font-weight: bold;
}

Answer 3

以下是基本CSS的替代答案，使用jQuery（因为问题被标记为）：

$("li").hover(function()
{
    $(this).css("font-weight", 'bold');
});

Working demo using jsFiddle

修改

如果您希望它适用于每个子li，那么您必须将代码更改为：

$("li li").hover(function() { $(this).css("font-weight", 'bold'); });

Woring demo using jsFiddle

Answer 4

不完全确定jQuery方法是否有效，100％css方法应该可以工作。

CSS：

li:hover {
    font-weight: bold;
}

jQuery的：

$('li:hover').css('font-weight','bold');

Answer 5

最后我解决了我的问题：|

Here是小提琴。

HTML =

<ul>
       <li>
               <div id="div_a">a</div>
                <ul>
                    <li><div class="c1">a1</div></li>
                    <li><div class="c1">a2</div></li>
                </ul>
        </li>
    </ul>

CSS =

    li{
            list-style-type:none;
    }
    ul li{
        float:left;
        width:100px;
        height:40px;
        background-color:pink;
        border:solid 1px black;
        list-style-type:none;
        text-align:center;
        margin-left:1px;
    }
    li ul li{
        margin-left:-41px;
        margin-top:12px;
        position:relative;
        z-index:100;
        clear:both;
    }
    li ul{
        margin-top:20px;
    }
    #div_a:hover ,  .c1:hover{
        font-weight:bold;
    }

在悬停时为每个<li>设置加粗字体</li>

5 个答案: