Question

我有这样的事情：

$(".mini-circle").hover(function() {
  $("#circle").html($(this).html())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="mini-circle" style="background-color:#A9A9A9">circle
  <ul visibility: hidden>
    <li><b>Indecision:</b> Gray prefers to sit in the middle, not making a decision either way, sitting on the fence.</li>
    <li><b>Detached:</b> being non-emotional, gray can appear indifferent, uncaring, cold and aloof.</li>
    <li><b>Unemotional:</b> gray can appear neutral, disinterested, objective or impartial.</li>
  </ul>
</button>

<div class="row">
  <div id="circle" style="background-color:red" align="center">
  </div>
</div>

请注意，<ul>不可见。我用：

将<ul> html部分复制到下部div中。但是没有任何内容可见，因为它是按原样复制的。

$($(this).attr('visibility', 'visible')).html()

但是没用。我也尝试了许多其他的东西，但分支令人困惑。你知道我怎么解决这个问题吗？

Answer 1

如果这是你所期望的（这是我理解的），这有用。您需要在按钮悬停时显示<ul>。

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".mini-circle").hover(function() {
 	  $("#circle").html($(this).html());
          $("ul").css("visibility","visible");
      });
    });
  </script>
</head>

<body>


  <input type="button" class="mini-circle" style="background-color:#A9A9A9" value="circle">
  <ul style="visibility:hidden">
    <li><b>Indecision:</b> Gray prefers to sit in the middle, not making a decision either way, sitting on the fence.</li>
    <li><b>Detached:</b> being non-emotional, gray can appear indifferent, uncaring, cold and aloof.</li>
    <li><b>Unemotional:</b> gray can appear neutral, disinterested, objective or impartial.</li>
  </ul>

  <div class="row">
    <div id="circle" style="background-color:red" align="center">
    </div>
  </div>
</body>

</html>

Answer 2

感谢@SimplyMe，我有了一个主意：

$(".mini-circle").hover(function()
{
    var text = $(this).html();
    text = $(text).attr('style',"visibility: visible");
    $("#circle").html(text);
});

这似乎可以胜任！

仅在使用jquery复制html内容后才能看到内容

2 个答案: