Как сделать разные divs в том же месте?

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

код для двух других кнопок точно так же, все, что я делал, это изменение имен идентификаторов и позиционирование кнопок. Текст первой кнопки исчезает, но я не могу заставить его отображаться на мыши. Другой текст вообще не исчезает. Вы можете видеть это here.

Answer 1

Как насчет этого?

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

Answer 2

Изменить код 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 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