如何使不同的div出现在同一位置？

debugcn 发表于 Dev

独立游戏

我有三个按钮，希望它们将鼠标悬停在同一位置的不同位置显示不同的文本。我已经将其与一个按钮一起使用，但是一旦添加了其他两个按钮，它便停止了工作。这是我与第一个按钮一起使用的代码：

jQuery-

document.getElementById('description-text').style.display="none";

$("#description-button").on("mouseenter",function()
{
$("#description-text").fadeIn("slow");
});

$("#description-button").on("mouseleave",function()
{
$("#description-text").fadeOut("slow");
});

CSS-

#description-text {
    padding: 10px;
    float: left;
    width: 60%;
}

#description-button {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 200px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#description-container {
    z-index: 1;
    float: left;
    overflow: hidden;
    width: 70%;
    background: transparent;
}

#description-button:hover {
    background-color: #99daea;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

HTML-

<!--description-->
  <div id="description-container">
    <div id="description-button"></div>
    <div id="description-text">
     this is a description.
    </div><!--tab-text-->
</div><!--description-container-->

其他两个按钮的代码完全相同，我所做的只是更改ID名称和按钮的位置。第一个按钮的文本消失了，但是在鼠标悬停时我无法显示它。其他文字完全不会消失。你可以在这里看到它。

奥德塔

这个怎么样？

document.getElementById('description-text').style.display="none";

$(".description-button").each(function() {
   $(this).on("mouseenter",function() {
        $("#description-text").fadeIn("slow");
   });
});

$(".description-button").each(function() {
   $(this).on("mouseleave",function() {
        $("#description-text").fadeOut("slow");
   });
});

#description-text {
    padding: 10px;
    float: left;
    width: 60%;
}

#description-button1 {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 200px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#description-button2 {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 250px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
#description-button3 {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    position: absolute;
    left: 300px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

#description-container {
    z-index: 1;
    float: left;
    overflow: hidden;
    width: 70%;
    background: transparent;
}

.description-button:hover {
    background-color: #99daea;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--description-->
  <div id="description-container">
    <div class="description-button" id="description-button1"></div>
    <div class="description-button" id="description-button2"></div>
    <div class="description-button" id="description-button3"></div>
    <div id="description-text">
     this is a description.
    </div><!--tab-text-->
</div><!--description-container-->

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。