jQuery "thumbnail"函数

Question

我正在尝试开发一些“特色帖子”。当您 mouseover() 它们时，我希望它们发生变化。我想这将通过 jQuery 完成，我试着开始，但我对它很烂所以我想我会在这里问。

我想出了这个 jQuery 代码:

$(document).ready(function)
{
    $("#f_post_long").mouseover(function)
    {
        $("#f_post_long").append("<div class="hello">hello</div>");
    });
});

我想 .appending 一个新的 div 类与我在我的 CSS 中设置样式的类是必要的(？)虽然不确定。

CSS 看起来像这样:

#f_post_long
{
    width:500px;
    height:500px;
    background-color:red;
    text-align:center;
}

.hello
{
    background-color:blue;
    width:200px;
    height:200px;    
}

HTML 仅包含元素 #f_post_long。

我是在正确的轨道上还是完全被搞砸了？我不想要完美的解决方案，只是在正确的方向上给出一些关于什么对服务器最简单以及编写的代码量的指示!

Answer 1

正如 Zenith 所说，您必须在代码中转义“”，或者在双引号内使用单引号。

function 后面的括号应该是 () 而不是 )。

为了清楚起见，我还使用了 $(this) 关键字而不是直接引用相同的元素。

最后，如果您希望您的特色帖子像您所说的那样“改变”，而不是仅仅被添加到，您需要使用 .html() 函数，而不是 append()。

固定代码:

$(document).ready(function() {
    $("#f_post_long").mouseover(function() {
        $(this).html("<div class='hello'>Some different content.</div>");
    });
});

JSFiddle:http://jsfiddle.net/rowlandrose/eMTJq/2/