Question

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

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>

在课程内容说明中，不同的文字必须在悬停在链接上时显示，现在它是添加，当我悬停在移动时它必须说移动并再次使用不同的文本

我已经做了eleagnt解决方案所以安全，问题是当鼠标离开ASIDE我必须隐藏那个desription，这里是更新小提琴

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/

在悬停显示不同的文本bootstrap 3？

3 个答案: