css - 将鼠标悬停在上面并有一个展示？

Question

这是我目前正在做的事情。

PHP 回显了数据库中最近发布的用户名：

echo '<div id="userblock">test</div>';
echo '<span class="userpost">' . $str . ' - posted by <b>' . $username . '</b></span><br /><br />';

然后我想要它，所以当测试悬停在您看到用户个人资料/统计/信息直接出现在帖子的左侧时。

到目前为止，这是我对 CSS 的了解，我绝不擅长造型或造型。所以我会喜欢你的意见。

div#userblock {
display:none;
}

span.userpost:hover  div#userblock {
    background-color:#efefef;
    height:150px;
    width:150px;
}

Answer 1

因为那#userblock必须嵌套在.userpost.

就像是..

echo '<span class="userpost"> <div id="userblock".. />  </span>';

然后使用以下 CSS：

#userblock {

    display:none;
}

.userpost:hover  #userblock {

    display:block;
}

Answer 2

以下是使用 jquery 执行此操作的方法：http: //jsfiddle.net/surendraVsingh/sT66P/1/

jQuery代码：

$('.userpost').hover(function(){
    $(this).prev("#userblock").show();
    //$(this).prev("#userblock").toggle(); //if you want to toggle show/hide of div//
});​

CSS 代码

#userblock {
 background:#999;
 display:none;
}

.userpost{
    background-color:#efefef;
    height:150px;
    width:150px;
}​