0

我正在尝试开发一些“特色帖子”。我希望他们在你改变的时候改变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。

我是在正确的轨道上还是我完全搞砸了？我不想要完美的解决方案，只是在正确的方向上提供一些对服务器最简单的方法以及编写的代码量的一些指示！

4

3 回答 3

2

正如 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/

于 2013-05-18T18:06:50.720 回答
0

如果要显示的内容量不长，可以考虑从头渲染div（但隐藏），然后将其设置为悬停可见。这仅使用 css（不需要 js）。例如，请参见此处：

https://stackoverflow.com/a/5210074/1330293

于 2013-05-18T18:06:24.687 回答
0

如果我明白你想要什么，你不需要 jQuery，你可以使用纯 CSS。

首先看看那个小提琴：http: //jsfiddle.net/ENWQm/

您只需要隐藏.hellowithdisplay:none然后添加：

.f_post_long:hover .hello{
    display : block    
}

缩略图将在悬停时显示。

编辑：如果你想使用.slideUpand .slideDown，这里有一个 jQuery 的小提琴：http: //jsfiddle.net/ENWQm/1/。

您需要知道的是，父容器必须处于相对位置。

位于绝对位置的子容器，底部为 0。

使用.hover(fn1, fn2). fn1 开启mouseover，fn2开启mouseout。

我使用过append，但这不是一个好的解决方案，因为它会进行多次调用（这很糟糕）。如果您在页面加载时加载缩略图，代码将如下所示：

$('.f_post_long').hover(function(){
    $(this).('.hello').stop().slideDown();
},
function(){ 
    $(this).children('.hello').stop().slideUp();
})

请注意，始终可以使用 CSS3 动画，但浏览器尚不完全支持。

但如果您想尝试，请在此处探索 CSS：http: //jsfiddle.net/ENWQm/2/

于 2013-05-18T18:06:42.823 回答