在悬停时显示不同的文本引导程序 3？

Question

我有一些导航必须对链接进行一些解释，但它必须在另一个元素中，而不是像弹出窗口或工具提示。当用户将鼠标悬停在该链接上时它必须可见，当用户从该链接中删除鼠标时它必须是可见的，并且不同的文本必须在另一个上可见等等。

BS3中是否有简单优雅的解决方案，或者必须编写自定义JS:(

这是我的html

 <aside class="left-side-content" role="complementary">      
          <div class="list-group">
            <a href="#" data-description="1" class="list-group-item"><i class="fa fa-folder fa-2x"></i>Add</a>
            <a href="#" data-description="2" class="list-group-item"><i class="fa fa-file fa-2x"></i>Move</a>
            <a href="#" data-description="3" class="list-group-item"><i class="fa fa-upload fa-2x"></i>Delete</a>
          </div>
        </aside>

  <div class="content-explanation">
      <h2>Add</h2>
      <p> Lorem ipsum dolor sit amet, consectetur </p>    
  </div>

在类内容解释中，悬停在链接上时必须显示不同的文本，现在是添加，当我将鼠标悬停在移动时，它必须说移动和不同的文本

我已经做出了非常安全的优雅解决方案，问题是当鼠标离开时我必须隐藏那个描述，这里是更新小提琴

var targetDescription = $('[data-description]');
targetDescription.on("mouseenter", function () {
    var linkHeading = $(this).text();
    var linkDescritpion = $(this).attr("data-description");
    $('.content-explanation h2').text(linkHeading);
    $('.content-explanation p').text(linkDescritpion);
});

这是工作小提琴 http://jsfiddle.net/52VtD/9274/

更新

$(document).on("mouseenter", "[data-description]", function () {
    var linkHeading = $(this).text();
    var linkDescritpion = $(this).attr("data-description");
    $('.content-explanation h2').text(linkHeading);
    $('.content-explanation p').text(linkDescritpion);
});
$(document).on("mouseleave", "[data-description]", function () {
    $('.content-explanation h2').text("");
    $('.content-explanation p').text("");
});

问题是我认为它可以更短的功能更好，你知道吗？

Answer 1

试试这个解决方案

$(document).on("mouseenter", ".list-group-item" , function(){
    $(".content-explanation").find("h2").html($(this).text());
});

$(document).on("mouseleave", ".list-group-item" , function(){
    $(".content-explanation").find("h2").html("");
});

Answer 2

请参考之前的question。

.item:hover a p.new-label span{
 display: none;
}
.item:hover a p.new-label:after{
content: 'ADD';
}

试试上一题提到的fiddle

Answer 3

   <aside class="left-side-content" role="complementary">      
      <div class="list-group">
        <a href="#" class="list-group-item" data-content="Lorem ipsum dolor sit amet, consectetur"><i class="fa fa-folder fa-2x"></i>Add</a>
      </div></aside>

比在css中使用：

.list-group:hover .list-group-item:after{
    content: attr(data-content);
 }

使用此方法，您可以制作动态内容，将数据内容添加到您的 html 中

http://jsfiddle.net/p4jDn/41/