Question

我正在尝试制作一个显示在另一个div的.hover上的div，然后移动显示在.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

您是否有理由使用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;
}

Answer 2

尝试从CSS中的#woodenPickaxePopup中删除.craftingButton和float: left;中的top: 50;。

Updated Fiddle

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

2 个答案: