Question

我要求鼠标悬停在桌面上，图像1将显示，鼠标悬停在图像上，将显示工具提示。当我点击工具提示链接测试时，图像2必须显示在td内部，而前一个图像应该隐藏。

问题是图像2正在显示，但只有当我将鼠标悬停在桌面上时才会看到。一旦我点击了没有鼠标悬停的工具提示链接测试，如何显示图像二？

CSS：

td.myData > img  
{
    display: none;
    float: right;
    height: 19px;
}

td.myData:hover > img 
{
    display: inline-block;
}

JavaScript：

function test(data)
{
    alert('test invoked with data: ' + data);
    var two = document.getElementById('two');
    two.style.visibility = 'visible';
    var one = document.getElementById('one');
    one.style.visibility = 'hidden';
}

Answer 1

在测试数据脚本中添加display block / none部分，如下所示

<script>
      function test(data){
        alert("test invoked with data: " + data);
     var two = document.getElementById('two');
         two.style.visibility = 'visible';
         two.style.display = 'block';
      var one = document.getElementById('one');
         one.style.visibility = 'hidden';
         one.style.display = 'none';
    }

</script>

代码段如下......

$(function() {
  var rowData;
  $(document).tooltip({
    items: "img, [data-title]",
    content: function() {
      var element = $(this);
      if (element.is("img")) {
        rowdata = element.attr("data-title");
        $(document).off('click', '#test');
        $(document).on('click', '#test', function() {
          test(rowdata);
        });


      }

      return $(this).prop('title');
    },
    show: null,
    close: function(event, ui) {
      ui.tooltip.hover(

        function() {
          $(this).stop(true).fadeTo(1000, 1);
        },

        function() {
          $(this).stop(true).fadeOut(200, function() {
            $(this).remove();
          })
        });
    },
    position: {
      my: "left",
      at: "right"
    }
  });
});



$(function() {
  $('.one').attr('title', $('.myTooltipTable').remove().html());
  $(document).tooltip();
});

td.myData > img {
  display: none;
  float: right;
  height: 19px;
}
td.myData:hover > img {
  display: inline-block;
}

<script>
  function test(data) {
    alert("test invoked with data: " + data);
    var two = document.getElementById('two');
    two.style.visibility = 'visible';
    two.style.display = 'block';
    var one = document.getElementById('one');
    one.style.visibility = 'hidden';
    one.style.display = 'none';
  }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<table class="myTooltipTable" style="position:absolute;">
  <tr>
    <td> <span id="test">test</span>
    </td>
  </tr>
</table>

<br/>
<br>
<br>
<table border="1">
  <tr>
    <td class="myData">Data1
      <img class="one" id="one" data-title="Data1" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
      <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;" />
    </td>
  </tr>

  <tr>
    <td class="myData">Data2
      <img class="one" id="one" data-title="Data2" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
      <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;" />
    </td>
  </tr>

  <tr>
    <td class="myData">Data3
      <img class="one" id="one" data-title="Data3" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
      <img class="two" id="two" src="https://www.webkit.org/blog-files/acid3-100.png" width="15" height="15" style="visibility:hidden;" />
    </td>
  </tr>
</table>

希望这就是你要找的......

Answer 2

添加

two.style.display = 'block';

到您的test方法。目前您只是设置了visibility属性，但display属性仍然在CSS中设置为none，因此在将鼠标悬停在其上之前，图片不会呈现。

请参阅小提琴：http://jsfiddle.net/0w9yo8x6/47/

在表格行中显示图像

2 个答案: