在表格行中顯示圖片

我對桌面上的鼠標懸停有要求，圖片一會顯示，鼠標懸停在圖片上，會顯示一個工具提示。當我點擊工具提示鏈接測試時，圖像二必須在td內顯示，而前一圖像應該隱藏。在表格行中顯示圖片

問題是圖像二顯示，但我只能看到，如果我把鼠標放在桌子上。一旦我點擊工具提示鏈接測試而不用鼠標懸停，我如何顯示圖像二？

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'; 
}

來源

2014-12-22 user222

不要使用相同的ID超過每一次元素。也開始考慮通過jQuery選擇元素，而不是原始js和jQuery之間的混合。這將以混亂的效果結束。 – Tyr

在您的測試數據腳本添加顯示塊/無一部分這樣的，

<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>

希望這是你要找的...

來源

2014-12-22 17:47:39 Sai

添加

two.style.display = 'block';

您test方法。目前，您只需設置visibility屬性，但display屬性在CSS中仍設置爲none，因此只有在將鼠標懸停在其上時，圖像纔會呈現。

見琴：http://jsfiddle.net/0w9yo8x6/47/

來源

2014-12-22 17:48:07 mikelt21

在表格行中顯示圖片

回答

相關問題