Question

我有三个按钮，我希望它们在鼠标悬停时在同一个位置显示不同的文本。我用一个按钮就可以使用它，但是一旦我添加了另外两个按钮，它就停止了工作。这是我用第一个按钮的代码：

的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名称和按钮的位置。第一个按钮的文字消失了，但我无法通过鼠标悬停显示它。其他文字根本没有消失。你可以看到它here。

Answer 1

将您的jquery代码更改为不显示div，但也使用正确的内容填充div：

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

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

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

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

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

Answer 2

这个怎么样？

＆＃13;

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");
   });
});

＆＃13;

#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;
}

＆＃13;

<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-->

＆＃13;

Answer 3

如果您使用类，可能会更容易，例如：

$(".button").on("mouseenter", function () {
    $(this).next(".description").fadeIn("slow");
});

$(".button").on("mouseleave", function () {
    $(this).next(".description").fadeOut("slow");
});

.description {
    padding: 10px;
    position: absolute;
    top: 0;
    float: left;
    width: 60%;
    display: none;
}
.button {
    border-radius: 100%;
    border: 1px solid #aaa;
    width: 10px;
    height: 10px;
    margin-top: 10px;
    /*position: absolute;
    left: 200px;*/
    margin-left: 200px;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.container {
    z-index: 1;
    float: left;
    overflow: hidden;
    width: 70%;
    background: transparent;
}
.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>
<div class="container">
    <div class="button"></div>
    <div class="description">this is a</div>
    <div class="button"></div>
    <div class="description">this is b</div>
    <div class="button"></div>
    <div class="description">this is c</div>
</div>

Answer 4

这就是我提出的：

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

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

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

查看the complete JSFiddle demo here

如何让不同的div出现在同一个地方？

4 个答案: