如何对齐文本以适应使用 Top: 50px; 向下移动的 Div

Question

我正在尝试制作一个 div 出现在另一个 div 的 .hover 上，然后将出现在 .hover 上的 div 向下移动到 div 悬停在上面。我已经让这部分工作得很好，但是文本在悬停 div.

下方

HTML

<!DOCTYPE html>
<html>
    <link rel="stylesheet" type="text/css" href="interface.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
<head>
<div id="elementID">
<div id="woodenPickaxe">
    <a class='craftWoodenPickaxe' href='#'>
        <span class='craftingButton'>Craft Wooden Pickaxe</span>
        <div id="woodenPickaxePopup"> Cost 50 wood </div>
    </a>
</div>
</div>

Jscript

$(function(){
$("#woodenPickaxe").hover(function() { 
    $("#woodenPickaxePopup").toggle(); 
});

CSS

#elementID{
height: 500px;
width: 500px;
background: green;
padding-top: 100px;    
}
#woodenPickaxePopup{
height: 50px;
width: 158px;
background: white;
display: none;
position: relative;
top: 50px;
}

.craftingButton {
    background-color:#FFFFFF;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#616161;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:48px;
    line-height:50px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    float: left;
}
.craftingButton:active {
    position:relative;
    background: #ffffff;
    border: solid; 
    border-width: 1px;
    border-color: #ffffff;
    top:1px;
}

.craftingButton:hover {
    background-color:#F2F2F2;
}

padding-top: 100px;
}
.craftingButton {
    background-color:#FFFFFF;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#616161;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:48px;
    line-height:50px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #ffffff;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    float: left;
}
.craftingButton:active {
    position:relative;
    background: #ffffff;
    border: solid; 
    border-width: 1px;
    border-color: #ffffff;
    top:1px;
}

.craftingButton:hover {
    background-color:#F2F2F2;
}

JSfiddle Example:

如您所见，悬停工作正常，div 都正常工作，除了我的 woodenPickaxePopup div 中的文本，它位于 div 应该在的位置下方是。

编辑：对于我使用的脏话，我深表歉意，我昨晚制作那个 jsfiddle 时忘记了它，并且因为我无法解决这个问题而感到沮丧。

Answer 1

尝试从您的 CSS.

中的 .craftingButton 中删除 float: left; 并从 #woodenPickaxePopup 中删除 top: 50;

Updated Fiddle

Answer 2

你使用 javascript 来显示 woodenPickaxePopup div 是有原因的吗？你可以在没有 javascript.

的情况下实现同样的事情

这是一个工作更新： http://jsfiddle.net/RBJ9R/1600/

变化的部分：

#woodenPickaxePopup{
    height: 50px;
    width: 158px;
    background: white;
    display: none;
    position: absolute; // changed to absolute
    top: 50px;
}

// added this
.craftWoodenPickaxe {
    position: relative;
}

// added this
.craftWoodenPickaxe:hover #woodenPickaxePopup {
    display: block;
}

如何对齐文本以适应使用 Top: 50px; 向下移动的 Div

How do I align text to fit in a Div that is moved down with Top: 50px;

html

javascript

css

jquery