在另一個div中顯示類的內容

Question

我正在嘗試顯示<li>元素的某些內容，如果它在id為#displayBox的div中具有類.submenus的話。

它或多或少都在做，但是有一個問題，它只做一次，然后就不再發生了：S

我想念什么？

https://jsfiddle.net/511j93tn/1/

的HTML：

<div class="wrap">
    <div class="left col-md-8 col-sm-8">
        <ul id="mainNav">
            <li class="submenus">
                <a href="#">Home</a>
                <div class="info">Some stuff about Home</div>
            </li>
            <li>
                <a href="#">Location</a>  
            </li>
            <li class="submenus">
                <a href="#">Services</a>
                <div class="info">Some stuff about Services</div>
            </li>
            <li class="submenus">
                <a href="#">Merchandising</a>
                <div class="info">Some stuff about Merchandising</div>
            </li>
        </ul>
    </div>
    <div class="right col-md-4 col-sm-4">Social icons here</div>
    <div id="displayBox" class="col-md-12 col-sm-12"></div>
</div>

CSS：

 #mainNav li{
        display:inline-block;
    }
    .left, .right {
        width:auto:
    }
    .info,
    #displayBox{
        display:none;
    }

    #displayBox {
        border:1px solid red;
        height:30px;
    }

js：

$(".submenus").hover(function() {
      $info = $(this).find(".info");
    $("#displayBox").css("display", "block");
    $("#displayBox").html(($info).css("display", "block")).html();
    }, function() {
      $info = $(this).find(".info");
    $("#displayBox").css("display", "none");
   });

我認為我做的事太久了。 對？ 它一定是實現這一目標的更短方法嗎？

謝謝！

Answer 1

您可能正在尋找為$("#displayBox")設置.html()更改，這就是您想要的： https : $("#displayBox")

Answer 2

這個jQuery代碼將幫助您。 嘗試這個

$(".submenus").hover(function() {
  $info = $(this).find(".info");
  $("#displayBox").css("display", "block");
  $("#displayBox").html(($info).html());
}, function() {
  $info = $(this).find(".info");
  $('#displayBox').css("display", "none");
});