jquery - 检查 sub-div 鼠标悬停

Question

我不是 100% 确定如何问这个问题。如果您理解，请编辑它。

我想检查一个 sub-div 鼠标悬停事件。但它不起作用。我目前的代码是这样的：

$('#mc').hover(function() {
    if (selectedCoding !== 1)
        $(this).css({"color":"red"});
    else
        $(this).css({"color":"white"});
}, function() {
    if (selectedCoding !== 1)
        $(this).css({"color":"white"});
    else
        $(this).css({"color":"red"});
});

这是#mc 所在的位置：

<div id="coding">
    <ul>
        <li id="mc">
            <img src="images/minecraft.png">
            <h3>Minecraft Plugins</h3>
            <p>Description text</p>
        </li>
    </ul>
</div>

这里的问题是它在 jQuery 函数中找不到 #mc 。

在我的 index.php 文件中，我有这个小代码：

$('#webbox').load('codinghelp.html');

以下所有内容都在“codinghelp.html”中：

    <div id="coding">
    <ul>
        <li id="mc">
            <img src="images/minecraft.png">
            <h3>Minecraft Plugins</h3>
            <p>Description text</p>
        </li>
    </ul>
</div>
<span style="color:green" id="request"> </span>

我无法从我的 index.php 文件中找到 #mc，但我可以找到 #request，因为此代码有效：

$('#request').text('Minecraft');

Answer 1

最好用 CSS 来处理，这样就不用担心事件绑定和动态元素了。您只需要mc在值selectedCoding更改时设置类。

工作演示

jQuery

$('#mc').addClass((selectedCoding !== 1 ? 'selected' : 'selectedInverse'));

CSS

.selected {
    color: white;
}
.selected:hover {
    color: red;
}

.selectedInverse {
    color: red;
}
.selectedInverse:hover {
    color: white;
}